<script type=”text/javascript”>
 window.onload=function(){
     waterfall('main','box');
}
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);
  oParent.style.cssText = 'width:'+oBoxW*cols+'px;margin:0 auto;';
  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);

// 计算及定义图片出现的位置
      oBoxs[i].style.position='absolute';
      var index = getMinhIndex(hArr,minH);
     
      // 改变数组值
     oBoxs[i].style.position='absolute';
      oBoxs[i].style.top=minH+'px';
   oBoxs[i].style.left=oBoxs[index].offsetLeft+'px';
   hArr[index]+=oBoxs[i].offsetHeight;
    }
  }
function getByClass(parent,clsName){
  var boxArr=new Array(),
      oElements=parent.getElementsByTagName('*');
  for(var i=0;i<oElements.length;i++){
    if(oElements[i].className==clsName){
      boxArr.push(oElements[i]);
    }
  }
  return boxArr;
}

// 求值在数组中的索引,arr接收的是数组，val接收的是判断的值
function getMinhIndex(arr,val){
    for(var i in arr){
        if(arr[i] == val){
   return i;
  }
 }
}
</script>

function getByClass(clsName, parent){
 //定义函数getByClass()实现获取document或指定父元素下所有class为on的元素 
parent = parent?parent:document;
var onArr=new Array(),
    onEls=parent.getElementsByTagName('*');
   for(var i=0;i<onEls.length;i++)
   {
       if(onEls[i].className==clsName){
           onArr.push(onEls[i]);
       }
   }

    return onArr;   

}