瀑布流布局
Posted TXXT
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了瀑布流布局相关的知识，希望对你有一定的参考价值。
window.onload=function(){ waterfall(\'main\',\'box\'); var dataInt={\'data\':[{\'src\':\'1.jpg\'},{\'src\':\'2.jpg\'},{\'src\':\'3.jpg\'},{\'src\':\'4.jpg\'}]}; window.onscroll=function(){ if(checkscrollside()){ var oParent = document.getElementById(\'main\');// 父级对象 for(var i=0;i<dataInt.data.length;i++){ var oBox=document.createElement(\'div\'); //添加 元素节点 oBox.className=\'box\'; //添加 类名 name属性 oParent.appendChild(oBox); //添加 子节点 var oWrap=document.createElement(\'div\'); oWrap.className=\'wrap\'; oBox.appendChild(oWrap); var oImg=document.createElement(\'img\'); oImg.src=\'./images/\'+dataInt.data[i].src; oWrap.appendChild(oImg); } waterfall(\'main\',\'box\'); }; } } window.onresize=function(){ console.log(\'窗口改变\'); waterfall(\'main\',\'box\'); } function waterfall(parent,box){ var oBoxs=getByClass(parent,box); var oMain=document.getElementById(parent); var oBoxW=oBoxs[0].offsetWidth; //获取盒子的宽度 var num=Math.floor(document.documentElement.clientWidth/oBoxW); oMain.style.cssText=\'width:\'+num*oBoxW+\'px; margin:0 auto;\'; var hArr=[]; //保存高度的数组 for(var i=0; i<oBoxs.length; i++){ if(i<num){ hArr[i]=oBoxs[i].offsetHeight; oBoxs[i].style.position=\'absolute\'; oBoxs[i].style.top=0+\'px\'; oBoxs[i].style.left=oBoxW*i+\'px\'; }else{ var minH=Math.min.apply(null,hArr); //求出最小的高度作为下一个box的top值 var minHIndex=getminHIndex(hArr,minH); /*根据数组最小的值获取到它的索引*/ oBoxs[i].style.position=\'absolute\'; //改为绝对定位 oBoxs[i].style.top=minH+\'px\'; oBoxs[i].style.left=oBoxs[minHIndex].offsetLeft+\'px\'; hArr[minHIndex]+=oBoxs[i].offsetHeight; //最小高度增加 } } } /*根据classname和获取到元素*/ function getByClass(parent,className){ var arr=[]; var oParent=document.getElementById(parent); var elements=oParent.getElementsByTagName(\'*\'); for(var i=0; i<elements.length;i++){ if(elements[i].className==className){ arr.push(elements[i]); } } return arr; } /*根据数组最小的值获取到它的索引*/ function getminHIndex(arr,minH){ for(var i in arr){ if(arr[i]==minH){ return i; } } } /*判断是否滚动到了最后的高度*/ function checkscrollside(){ var oBoxs=getByClass(\'main\',\'box\'); var oMain=document.getElementById(\'main\'); var lastPinH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);//创建【触发添加块框函数waterfall()】的高度：最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载) var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//注意解决兼容性 var documentH=document.documentElement.clientHeight;//页面高度 return (lastPinH<scrollTop+documentH)?true:false;//到达指定高度后 返回true，触发waterfall()函数 }
#main{position:relative; } .box{padding:15px 0 0 15px; float:left;} //这里用padding可以方便用offsetHeight获得高度 .wrap{padding:10px; box-shadow:0 0 5px #ccc;} //添加图片边框和阴影 .box img{width:200px; height:auto;}
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>waterfall</title> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body> <div id="main"> <div class="box"> <div class="wrap"> <img src="images/1.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/2.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/3.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/4.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/5.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/6.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/7.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/8.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/9.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/10.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/11.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/12.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/13.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/14.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/15.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/16.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/17.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/18.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/19.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/20.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/21.jpg"> </div> </div> </div> </body> </html>
amy的课程真心不错，先看视频，然后看代码，最后自己敲出来就可以了http://www.imooc.com/learn/101
课程里面的源码缩小后再放大会错位，我这里把第一行的元素也直接改成了定位，修复bug
以上是关于瀑布流布局的主要内容，如果未能解决你的问题，请参考以下文章