没有实现排序效果，求大神支招

源自：2-5 onscroll事件实现瀑布流布局的图片加载功能

没有实现排序效果，求大神支招

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

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

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>

</body>

</html>

提问者：火星上的慕老爷 2015-07-21 11:40

没有实现排序效果，求大神支招

个回答