                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /瀑布流布局

为什么第七张后的图left没有和上一排高度最小的图片对齐

$(window).on('load',function(){
waterfall();
})

慕村8974351

2018-01-05

源自：瀑布流布局 3-1

关注问题我要回答

1271

操作

收起

2 回答

Jason_途牛
2018-09-15

$(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');
})