亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

oBoxs[i].style.left =oBoxW*index +'px' 這一行,在最少高度的那列,圖片會偏左

oBoxs[i].style.left =oBoxW*index +'px';

http://img1.sycdn.imooc.com//58a54a130001738a17990560.jpg

沒有于高度最少的那一列對齊

而我是使用另一種方法: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);
}

正在回答

1 回答

我在我這里測試了你的代碼沒問題啊不會偏移,你是不是設置了盒子margin了

0 回復 有任何疑惑可以回復我~
#1

敲出自己的人生 提問者

不是margin 謝謝,是我代碼敲錯了
2017-02-21 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消

oBoxs[i].style.left =oBoxW*index +'px' 這一行,在最少高度的那列,圖片會偏左

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號