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

}