没有实现排序效果，求大神支招
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>瀑布流布局</title>
<style>
*{ margin:0; padding:0;}
.main{ position:relative;}
.box{ padding:15px 0 0 15px; float:left;}
.box a{ display:block; border:1px solid #CCC; border-radius:5px; box-shadow:0 0 5px #CCC; padding:10px;}
.box a img{ width:192px;}
</style>
<script>
window.onload=function(){
waterfall('main','box');
};
function waterfall(parent,son){
var oParent=document.getElementById(parent);
var oBoxs=getByClass(oParent,son);
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);
var index=getMinhIndex(hArr,minH);
oBoxs[i].style.position='absolute';
oBoxs[i].style.top=minH+'px';
oBoxs[i].style.left=oBoxW*index+'px';
hArr[index]+=oBoxs[i].offsetHeight;
}
}
};
function getByClass(parent,clsName){
var boxArr=[];
var 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){
if(arr[i]==val){
return i;
}
}
};
</script>
</head>
<body>
<div class="main">
<div class="box"><a href="#"><img src="images/P_00.jpg"/></a></div>
<div class="box"><a href="#"><img src="images/P_02.jpg"/></a></div>
<div class="box"><a href="#"><img src="images/P_03.jpg"/></a></div>
<div class="box"><a href="#"><img src="images/P_04.jpg"/></a></div>
<div class="box"><a href="#"><img src="images/P_05.jpg"/></a></div>
<div class="box"><a href="#"><img src="images/P_06.jpg"/></a></div>
<div class="box"><a href="#"><img src="images/P_07.jpg"/></a></div>
<div class="box"><a href="#"><img src="images/P_08.jpg"/></a></div>
<div class="box"><a href="#"><img src="images/P_09.jpg"/></a></div>
<div class="box"><a href="#"><img src="images/P_010.jpg"/></a></div>
<div class="box"><a href="#"><img src="images/P_011.jpg"/></a></div>
<div class="box"><a href="#"><img src="images/P_012.jpg"/></a></div>
<div class="box"><a href="#"><img src="images/P_013.jpg"/></a></div>
<div class="box"><a href="#"><img src="images/P_014.jpg"/></a></div>
<div class="box"><a href="#"><img src="images/P_015.jpg"/></a></div>
<div class="box"><a href="#"><img src="images/P_016.jpg"/></a></div>
<div class="box"><a href="#"><img src="images/P_017.jpg"/></a></div>
<div class="box"><a href="#"><img src="images/P_018.jpg"/></a></div>
<div class="box"><a href="#"><img src="images/P_019.jpg"/></a></div>
</div>
</body>
</html>
