?

? ? ? ? window.onload=function(){

? ? ? ? ? ? waterFall('main','box');

? ? ? ? }

? ? ? ? function waterFall(parent,box){

//將main下的所有box類取出來

? ? ? ? ? ? var oParent=document.getElementById(parent);

? ? ? ? ? ? var num=getByClass(oParent,box);

? ? ? ? ? ? console.log(num.length);

//計算整個頁面顯示的列數（頁面寬/box的寬）

? ? ? ? ? ? var oBoxW=num[0].offsetWidth;

? ? ? ? ? ? console.log(oBoxW);

?//對算出來的值取整

? ? ? ? ? ? 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<num.length;i++){

? ? ? ? ? ? ? ? if(i<cols){

? ? ? ? ? ? ? ? ? ? harr.push(num[i].offsetHeight);

? ? ? ? ? ? ? ? }else{

? ? ? ? ? ? ? ? //求數組中的最小值

? ? ? ? ? ? ? ? ? ? var minh=Math.min.apply(null,harr); //求每一列圖片的最小高度

? ? ? ? ? ? ? ? ? ? var index=getMinhIndex(harr,minh);

? ? ? ? ? ? ? ? ? ? num[i].style.position='absolute';

? ? ? ? ? ? ? ? ? ? num[i].style.top=minh+'px';

//num[i].style.left=oBoxW*index+'px';

? ? ? ? ? ? ? ? ? ? num[i].style.left=num[index].offsetLeft+'px';

? ? ? ? ? ? ? ? ? ? harr[index]+=num[i].offsetHeight;

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? ? ? console.log(harr); ? ? ? ?}

? ? ? ? //根據class獲取元素

? ? ? ? function getByClass(parent,clsName){

? ? ? ? ? ? var oBox=new Array(); //用來存取獲取到的class為box的類

? ? ? ? ? ? var oElements=document.getElementsByTagName('*');

? ? ? ? ? ? for(var i=0; i<oElements.length;i++){

? ? ? ? ? ? ? ? if(oElements[i].className==clsName){

? ? ? ? ? ? ? ? ? ? oBox.push(oElements[i]);//把一個值加入到數組當中

? ? ? ? ? ? ? ? }

? ? ? ? ? ? };

? ? ? ? ? ? return oBox;

? ? ? ? }

? ? ? ? function getMinhIndex(arr,minh){

? ? ? ? ? ? for(var i in arr){

? ? ? ? ? ? ? ? if(arr[i]==minh){

? ? ? ? ? ? ? ? ? ? return i;

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? }