为了账号安全,请及时绑定邮箱和手机立即绑定

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下载
官方微信