window.onload=function(){
 warterfull('main','box');
}

function warterfull(parent,box){
   //将main下的所有class为box的元素取出
   var oparent=document.getElementById(parent);
   var oBox=getbyclass(oparent,box);
   //计算图片的列数
   var oBoxW=oBox[0].offsetWidth;
   var cols=Math.floor(document.documentElement.clientWidth/oBoxW);
   //计算main固定宽度
   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(null,Harr);
     var index=getindex(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;
    }
   }
}
//根据class获取元素
function getbyclass(parent,clsname){
 var boxarr=new Array();//存放属性值为box的数组
 oelement=parent.getElementsByTagName('*');
 for(var i=0;i<oelement.length;i++){
  if(oelement[i].className==clsname){
   boxarr.push(oelement[i]);
  }
    return boxarr;
 }
}
function getindex(Harr,val){
   for(var i in Harr){
      if(Harr[i]==val){
        return i;
      }
   }
}