$(window).on('load',function(){
waterfall();
})
function waterfall(){
var $boxs=$('#main>div');//只找一级div
var w=$boxs.eq(0).outerWidth();
var cols=Math.floor($(window).width()/w);
$('#main').width(w*cols).css('margin','0 auto');
var hArr=[];
$boxs.each(function(index, value) {
var h=$boxs.eq(index).outerHeight();
if(index<cols){
hArr[index]=h;//前六张
}else{
var minH=Math.min.apply(null,hArr);
var minHIndex=$.inArray(minH,hArr);//minH在hArr中的索引
$(value).css({
'position':'absolute',
'top':minH+'px',
'left':3*w+'px',
})
}
})
}
$(window).on('load', function () {
//取得图片整个容器DOM对象
var $boxs = $("#main>div");
// 一个图片框的宽
var w = $boxs.eq(0).outerWidth();
//每行能展示的图片列数
var cols = Math.floor($(window).width() / w);
//给最外围的main元素设置宽度和外边距
$('#main').width(w * cols).css('margin', '0 auto');
//并求出#main元素的左侧和页面边界的距离，供下面计算使用
var letPadding = ($(window).width() - cols * w) / 2;
//用于存储 每张图片容器高度。
var hArr = [];
$boxs.each(function (index, value) {
// 返回每个图片容器的高度值
var h = $boxs.eq(index).outerHeight();
//第一行图片的条件是 index < cols
if (index < cols) {
//每次给数组存入高度值
hArr[index] = h;
} else {
var minH = Math.min.apply(null, hArr);
var minHIndex = $.inArray(minH, hArr);
let leftPx = minHIndex * w + letPadding;
$(value).css({
'position': 'absolute',
'top': minH + 'px',
'left': leftPx + 'px'
})
//累计改变hArr中最小元素的高度值，直到$boxs数组最后一个元素完成时，结束
hArr[minHIndex] += $boxs.eq(index).outerHeight();
}
})
$('#main').width(w * cols).css('margin', '0 auto');
})已看到错误