css代碼

---------------------------------------------

*{

margin: 0;

padding: 0

}

#main{

position:relative;?

}

.box{padding: 15px 0 0 15px;float: left;}

.pic{

padding: 10px;

border: 1px solid #ccc;

border-radius:5px;

box-shadow: 0 0 5px #ccc;

}

.pic img{

width: 230px;

height: auto;

}

-----------------------------------

js代碼

-----------------------------------

window.onload=function(){

waterfall('main','box');

}

function waterfall(parent,box){

//將main下的所有claa 為box的元素取出來

var oParent=document.getElementById(parent);

var oBoxs=getByClass(oParent,box);

//console.log(oBoxs.length);

//計算整個頁面顯示的列數(頁面寬/box的寬)

var oBoxW=oBoxs[0].offsetWidth;

//console.log(oBoxW);//267=圖片寬度230+內邊距10*2+邊框寬度1*2+15

var cols=Math.floor(document.documentElement.clientWidth/oBoxW);

//console.log(cols);

//設置main的寬,屬性style.cssText可以使css樣式以字符串形式設置進來

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);

/*apply方法能劫持另外一個對象的方法，

繼承另外一個對象的屬性.

Function.apply(obj,args)方法能接收兩個參數

obj：這個對象將代替Function類里this對象

args：這個是數組，它將作為參數傳給Function.*/

//console.log(minH);

var index=getMinhIndex(hArr,minH);

oBoxs[i].style.position='absolute';

oBoxs[i].style.top=minH+'px';

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

}

}

console.log(hArr);

}

//根據class獲取元素

function getByClass(parent,clsName){

var boxArr=new Array(),//用來存儲獲取到的所有class 為box的元素

oElements=parent.getElementsByTagName('*');

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

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

boxArr.push(oElements[i]);

}

}

return boxArr;

}

function getMinhIndex(arr,val){

for(var i in arr){//遍歷arr數組

if(arr[i]==val){

return i;

}

}

}

-----------------------