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

function warterfull(parent,box){
?? //將main下的所有class為box的元素取出
?? var oparent=document.getElementById(parent);
?? var oBox=getbyclass(oparent,box);
?? //計算圖片的列數(shù)
?? var oBoxW=oBox[0].offsetWidth;
?? var cols=Math.floor(document.documentElement.clientWidth/oBoxW);
?? //計算main固定寬度
?? oparent.style.cssText='width:'+oBoxW*cols+'px;margin:0 auto';
?? //存放每列每一列高度的數(shù)組
?? 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;
?? ?}
?? }
}
//根據(jù)class獲取元素
function getbyclass(parent,clsname){
?var boxarr=new Array();//存放屬性值為box的數(shù)組
?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;
????? }
?? }
}