oBoxs[i].style.left =oBoxW*index +'px' 這一行,在最少高度的那列,圖片會偏左
oBoxs[i].style.left =oBoxW*index +'px';
沒有于高度最少的那一列對齊
而我是使用另一種方法:oBoxs[i].style.left =oBoxs[index].offsetLeft+ 'px',就避免了問題
請問為什么會出現這樣的問題?
function waterfall(parent,box){
?? ?//將main下的所有class為box的元素取出來
?? ?var oParent = document.getElementById(parent);
?? ?var oBoxs =getByClass(oParent,box);
?? ?//計算整個頁面顯示的列數(頁面寬/box的寬)
?? ?var oBoxW = oBoxs[0].offsetWidth;
?? ?var cols =Math.floor(document.documentElement.clientWidth/oBoxW);
?? ?//設置maind的寬
?? ?oParent.style.cssText = 'width:'+oBoxW*cols+'px;margin:0 auto';
?? ?var ArrH=[];//存放每一列高度的數組
?? ?for(var i =0;i<oBoxs.length;i++){
?? ??? ?if(i<cols){
?? ??? ??? ?ArrH.push(oBoxs[i].offsetHeight)
?? ??? ??? ?
?? ??? ?}else{
?? ??? ??? ?var minH=Math.min.apply(null,ArrH);
?? ??? ??? ?var index =getMinhIndex(ArrH,minH);
?? ??? ??? ?oBoxs[i].style.position ='absolute';
?? ??? ??? ?oBoxs[i].style.top =minH+'px';
?? ??? ??? ?oBoxs[i].style.left =oBoxW*index +'px';
?? ??? ??? ?//oBoxs[i].style.left =oBoxs[index].offsetLeft+ 'px';
?? ??? ??? ?//ArrH[index] +=oBoxs[i].offsetHeight;
?? ??? ?}
?? ?
?? ?}
?? ?console.log(ArrH);
}
2017-02-16
我在我這里測試了你的代碼沒問題啊不會偏移,你是不是設置了盒子margin了