敲出自己的人生
2017-02-16 14:45
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);
}
我在我这里测试了你的代码没问题啊不会偏移,你是不是设置了盒子margin了
瀑布流布局
97759 学习 · 736 问题
相似问题