为什么chrome打印第一行盒子的高度offsetHeight都是55px?

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

慕UI3822588

2016-05-10 17:34

function waterfall(parent,box){
   var oParent=document.getElementById(parent);
   //获取盒子对象
   var oBoxs=getByClass(oParent,box);
   //计算整个页面显示图片的列数(浏览器宽度/盒子的宽度)
   var oBoxW=oBoxs[0].offsetWidth;
   var cols=Math.floor(document.documentElement.clientWidth/oBoxW);
   //设置main盒子宽度
   oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0 auto';
   /*图片排序*/
   //存放每列高度的数组,else表明已经到了第二行,第一行不需要排序
   var hArr=[];
   for(var i=0;i<oBoxs.length;i++){
       if(i<cols){
           hArr.push(oBoxs[i].offsetHeight);
       }/*else{
           var minH=Math.min.apply(null,hArr);
           var index=getMinhIndex(hArr,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';
           hArr[index]+=oBoxs[i].offsetHeight;
       }*/
   }
   alert(oBoxs[0].offsetHeight)
}

写回答 关注

2回答

  • 慕UI3822588
    2016-05-13 16:38:36

    依次输入也是一样的,每一个高度都是55px


    慕粉6121...

    我遇到了与你相同的问题,请问你的问题解决了吗

    2019-04-23 08:46:46

    共 1 条回复 >

  • qq_覗水翛_0
    2016-05-10 23:37:09

     alert(oBoxs[0].offsetHeight)

    你这里输入的始终是oBoxs[0],也就是第一个box的高度啊。要依次输出每一个的高度,改成oBox[i].offsetHeight

瀑布流布局

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

97759 学习 · 736 问题

查看课程

相似问题