为什么第七张后的图left没有和上一排高度最小的图片对齐
来源：3-1 jQuery实现瀑布流布局图片定位
慕村8974351
2018-01-05 23:13
$(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',
})
}
})
}
写回答
关注
2回答
-
- Jason_途牛
- 2018-09-15 21:04:59
$(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'); }) -
- 慕村8974351
- 2018-01-05 23:35:26
已看到错误
瀑布流布局
瀑布流布局是网站比较流行的一种布局方式，教你实现三大方式
97747 学习 · 758 问题
相似问题