后加載圖片的第一列出現(xiàn)圖片重疊了,是哪里出問題了呢?
代碼和老師的差不多。
第一列的圖片多加載了,重疊在一起了。其他列正常,大神幫忙看下哪里出問題了
$(window).on('load',function(){ waterfall("main","pic"); var?dataInt={'data':[{'src':'tang-31.jpg'},{'src':'tang-32.jpg'},{'src':'tang-33.jpg'},{'src':'tang-34.jpg'},{'src':'tang-35.jpg'}]}; window.onscroll=function(){ if?(checkscrollside())?{ $.each(dataInt.data,function(index,value){ var?$oPic=$('<div>').addClass('pic').appendTo($("#main")); var?$oBox=$('<div>').addClass('box').appendTo($oPic); $('<img>').attr('src','images/'+$(value).attr('src')).appendTo($oBox); }); waterfall(); }; } }); //實現(xiàn)瀑布排列 function?waterfall(parent,pic){ var?$aPic=$("#main>div"); var?iPicW=$aPic.eq(0).width();//一個列pic的寬度 var?num=Math.floor($(window).width()/iPicW);//每行能容納的塊的個數(shù) $("#main").css({ 'width':iPicW*num, 'margin':'0?auto' }); var?picHArr=[?];//用于存儲?每列中所有塊框的高度。 $aPic.each(function(index,value){ var?picH=$aPic.eq(index).height(); if(index<num){ picHArr[index]=picH; }else{ var?minH=Math.min.apply(null,picHArr);//數(shù)組中的最小值。 var?minHIndex=$.inArray(minH,picHArr); $(value).css({ 'position':'absolute', 'top':minH+15, 'left':$aPic.eq(minHIndex).position().left }); picHArr[minHIndex]+=$aPic.eq(index).outerHeight()+15;//更新添加了塊框后的列高。 } }); } function?checkscrollside(){ var?$aPic=$("#main>div"); var?lastPicH=$aPic.last().get(0).offsetTop+Math.floor($aPic.last().height()/2); //創(chuàng)建觸發(fā)添加塊框函數(shù)waterfall()】的高度:最后一個塊框的距離網(wǎng)頁頂部+自身高的一半(實現(xiàn)未滾到底就開始加載) var?scrollTop=$(window).scrollTop(); var?documentH=$(document).width();//頁面高度 return(lastPicH<scrollTop+documentH)?true:false; }
2016-09-01
換個瀏覽器試試 ?
2016-06-23
var?iPicW=$aPic.eq(0).width();//width()這樣設(shè)置是不包括圖片的padding值的,也就是會比原值更小
var?num=Math.floor($(window).width()/iPicW);//既然iPicW減小了,每行能容納的塊的個數(shù)自然會增大(當(dāng)然本例因為取值原因并沒有增大)
'width':iPicW*num,//iPicW減小導(dǎo)致設(shè)置的整個div的寬度也變小了,結(jié)果減小后的div卻要容納同樣的列數(shù)num,自然會有一列重疊了
所以將var?iPicW=$aPic.eq(0).width();改為var?iPicW=$aPic.eq(0).outerWidth();即可
2016-06-02