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

来源:2-4 JavaScript实现瀑布流布局中图片排序

敲出自己的人生

2017-02-16 14:45

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

http://img.mukewang.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回答

  • 子不语怪力乱神
    2017-02-16 18:06:17

    我在我这里测试了你的代码没问题啊不会偏移,你是不是设置了盒子margin了

    敲出自己的人...

    不是margin 谢谢,是我代码敲错了

    2017-02-21 10:56:54

    共 1 条回复 >

瀑布流布局

瀑布流布局是网站比较流行的一种布局方式,教你实现三大方式

97759 学习 · 736 问题

查看课程

相似问题