給main設置了1000px的寬，按照一行4列來排列，貌似index值沒有取上，所有圖片跑到第一張下面去了，應該是在第4張下面的

window.onload?=?function(){
????waterfall("main",?"box");
}
//通過waterfall函數將存放每張圖片的盒子取出來
function?waterfall(parent,?box){
????var?oParent?=?document.getElementById("main");????
????var?oBoxs?=?getClassBox(oParent,box);??????
????var?pageW?=?oParent.offsetWidth;????
????var?oBoxW?=?oBoxs[0].offsetWidth;????????
????var?cols?=?pageW?/?oBoxW;????
????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);
????????????????var?index?=?getminhIndex(hArr,minH);????????????
????????????????oBoxs[i].style.position?=?"absolute";????????????
????????????????oBoxs[i].style.top??=?minH+"px";????????????
????????????????oBoxs[i].style.left?=?oBoxW*index+"px";????????
????????????}
????}
}
function?getClassBox(parent,?clsName){
????var?boxArr?=?[];??//?創建數組boxArr用來存儲取出來的box
????var?oElements?=?parent.getElementsByTagName("*");?//創建變量oElements用來獲取main下的box集合????????
????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?val){????????
????????if(arr[i]==val){????????????
????????????return?i;????????
????????}????
????}
}