在学习瀑布流布局中图片没有正确对齐的问题

Question

在进行left对齐时，使用两种方法，第一种总是无法对齐，第二种就不会（实际上也略有偏差），这两种不应该是一样的结果吗？

window.onload=function(){
    waterfall("main","box");
}

// 通过calssname获取元素兼容处理
function getByClass(obj,cls){
   elements=obj.getElementsByTagName("*");
   var result=[];
   for(var i=0;i<elements.length;i++){
       if(elements[i].className==cls){
           result.push(elements[i]);
       }
   }
   return result;
}

function waterfall(parent,box){
     // 将main下所有class=box的元素取出来
     var oParent=document.getElementById(parent);
     OBox=getByClass(oParent,box);
     // 计算整个页面显示的列数
     var oBoxW=OBox[0].offsetWidth;
     var mainW=document.documentElement.clientWidth?document.documentElement.clientWidth:document.body.clientWidth;
     var cols=Math.floor(mainW/oBoxW);
     // 设置页面的宽度
     oParent.style.cssText="width:"+oBoxW*cols+"px;margin:0 auto";
     var hArr=[];
     for(var i=0;i<OBox.length;i++){
         if(i<cols){
             hArr.push(OBox[i].offsetHeight)
         }
         else{
             var minH=Math.min.apply(Math,hArr);
             var index=getMinhIndex(hArr,minH);
             OBox[i].style.position="absolute";
             // 设置下一列的高度
             OBox[i].style.top=minH+"px";
             // 设置高度的两种方法
             OBox[i].style.left=index*oBoxW+"px";
          // OBox[i].style.left=OBox[index].offsetLeft+"px";
            hArr[index]+=OBox[i].offsetHeight;

         }
     }
      console.log(OBox[3].offsetLeft);
          console.log(OBox[7].offsetLeft);
  }
     // 取得最小高度box的索引
     function getMinhIndex(arr,val){
         for(var i in arr){
            if(arr[i]==val){
                return i;
            } 
         }
     }
     
     
     ![图片描述][1]

这是第一种方法在chrome上运行的效果
![图片描述]
这是控制台输出第一行第四列和第二行第四列的offsetleft

Answer 1

等待大神答复