                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /瀑布流布局

為什么第七張后的圖left沒有和上一排高度最小的圖片對齊

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

慕村8974351

2018-01-05

源自：瀑布流布局 3-1

關注問題我要回答

1335

操作

收起

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