没有实现排序效果，求大神支招-慕课网

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

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

火星上的慕老爷

2015-07-21 11:40

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

写回答关注

1回答

qq_在道上_0

2015-08-31 00:16:49

waterfall(parent,son) 里的 var oBoxs=getByClass(oParent,son); 查无此‘son’,

0 0

瀑布流布局

瀑布流布局是网站比较流行的一种布局方式，教你实现三大方式

97759 学习 · 736 问题

查看课程

相似问题

我设置了有限瀑布流。但是最后两张图片重叠。求大神支招

回答 2

为什么我按老师说的做没做出来效果，求大神指教

回答 1

请问如果是有序的图片,单靠js实现瀑布流,他是怎么自动排序的呢?

回答 1

为啥没有效果

回答 3

求大神看看这是为什么

回答 2

打开慕课网App查看更多内容