关于瀑布流布局JS代码无法实现效果

[温克拉]

window.onload = function(){
  //waterfall('main','box')
  waterfall('main','box')
}


function waterfall(parent,box){
  var oParent = document.getElementById(parent);
  var boxs = getClassName(oParent,box);
  var oBoxW = boxs[0].offsetWidth;
  var cols = Math.floor((document.documentElement.clientWidth)/oBoxW);

  //大盒子宽度
  oParent.style.cssText = 'width:'+ oBoxW*cols + 'px;margin:0 auto';
  var hArr = [];
  for (var i = 0; i < boxs.length; i++) {
    if (i < cols) {
      hArr.push(boxs[i].offsetHeight)
    }else {
      var minH = Math.min.apply(null,hArr);
      var index = getMinIndex(hArr,minH);
      boxs[i].style.position = 'absolute';
      boxs[i].style.top = minH + 'px';
      boxs[i].style.left = boxs[index].offsetLeft;
      //hArr[index] +=boxs[i].offsetHeight;
      hArr[index] += boxs[i].offsetHeight;
    }
  }

}


function getClassName(parent,clsname){

  var oElements = parent.getElementsByTagName('*')
  var boxs = []
  for (var i = 0; i < oElements.length; i++) {
    if (oElements[i].className == clsname) {
      boxs.push(oElements[i])
    }
  }
    return boxs
}

function getMinIndex(arr,value){
  for (var i in arr) {
    if (arr[i] == value) {
      return i;
    }
  }
}

这是我的js 代码 ·；

html就不贴了· ，太多重复的div ·

<div class='main'   id='main'>
<div class="box">
        <div class="pic">
         <img src="img/0.jpg" alt="" />
        </div>
      </div>
</div>

大致是这样子，里面很多box

但是我的效果是：

思路：学习的慕课网视频，拿到第一排图片的高，第二排的第一个图片排列到第一排高最小的图片下面，以此类推，但是现在的情况是我下面的图片全部堆积在第一张图下面了，我的第一拍图片有点特殊· 6张图里面最小的高度值是135 ，有3张图片是135的高度；

求大神解惑！

[FtShine]

boxs[i].style.left = boxs[index].offsetLeft;改为 boxs[i].style.left = boxs[index].offsetLeft+"px";