js实现瀑布流布局原理代码
实现功能：
1、定义函数 waterfall（parent,box） 实现瀑布流布局。
2、当拖动滚动轴时候，到底部时候会触发 添加元素事件，瀑布流布局。
瀑布流思路：第一排自由排版，记录第一排元素的高度存入数组，之后出现的元素 都会放到 数组高度最小的元素下面，
绝对定位方式（x-上面元素数组内序号*每个元素宽度 y-上面元素的高度），并且每执行一次，会重新定义高度最小的值，
之前高度加上当前元素的高度，存入数组。之后元素都如此执行。
如此每个新增元素都会放置在最小高度元素下面，也就实现瀑布流。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>瀑布流</title> <style type="text/css"> *{margin: 0; padding: 0;} #main{ /* width: 1000px; max-width: 1000px;*/ margin :0 auto; position: relative; } .box{ float: left; padding: 15px 0 0 15px; } .pic{ padding: 15px; border:1px solid #ccc; border-radius: 10px; box-shadow: 0 0 5px #ccc; } .box img{ width: 200px; } </style> </head> <body> <div id="main"> <div class="box"> <div class="pic"> <img src="images/1.png"> </div> </div> <div class="box"> <div class="pic"> <img src="images/2.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="images/3.png"> </div> </div> <div class="box"> <div class="pic"> <img src="images/4.png"> </div> </div> <div class="box"> <div class="pic"> <img src="images/5.png"> </div> </div> <div class="box"> <div class="pic"> <img src="images/6.png"> </div> </div> <div class="box"> <div class="pic"> <img src="images/7.png"> </div> </div> <div class="box"> <div class="pic"> <img src="images/8.png"> </div> </div> <div class="box"> <div class="pic"> <img src="images/9.png"> </div> </div> <div class="box"> <div class="pic"> <img src="images/10.png"> </div> </div> <div class="box"> <div class="pic"> <img src="images/11.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="images/12.png"> </div> </div> </div> <script type="text/javascript"> window.onload = function(){ waterfall('main','box'); dataImg = { arr:[ {'src':'images/1.png'}, {'src':'images/2.jpg'}, {'src':'images/3.png'}, {'src':'images/4.png'}, {'src':'images/5.png'}, {'src':'images/6.png'}, {'src':'images/7.png'}, {'src':'images/8.png'}, {'src':'images/9.png'}, {'src':'images/10.png'}, {'src':'images/11.jpg'} ] } window.onscroll = function(){ //当滚动到最后一张图片高度一般时刷新新数据 var boxs = getClass('box'); var oneh2 = boxs[boxs.length-1].offsetTop; var oneh = boxs[boxs.length-1].offsetHeight/2; var top = document.body.scrollTop || document.documentElement.scrollTop; var twoh = document.body.clientHeight||document.documentElement.clientHeight; if(oneh2+oneh<top+twoh){ for(var i=0;i<dataImg.arr.length;i++){ var main = document.getElementById('main'); var cdiv = document.createElement('div'); cdiv.className = 'box'; var cpic = document.createElement('div'); cpic.className = 'pic'; var cimg = document.createElement('img'); cimg.src = dataImg.arr[i].src; main.appendChild(cdiv); cdiv.appendChild(cpic); cpic.appendChild(cimg); } } waterfall('main','box'); } } function waterfall(parent,box){ //获取main元素 var oparent = document.getElementById(parent); //获取所有 box 元素 var obox = getClass('box'); //获取每行能放多少个 居中摆放 var w = document.body.clientWidth||document.documentElement.clientWidth; //var w =1000; var oneWidth = obox[0].offsetWidth; var num = Math.floor(w/oneWidth); main.style.width = num*oneWidth+'px'; //瀑布流原理 left-下标*图片width top-上面图片高 var hrr = []; for(var i=0;i<obox.length;i++){ if(i<num){ hrr.push(obox[i].offsetHeight); }else{ var min = Math.min.apply(null,hrr); var index = getindex(hrr,min); obox[i].style.position = 'absolute'; obox[i].style.left = index*oneWidth+'px'; obox[i].style.top = min+'px'; hrr[index] += obox[i].offsetHeight; } } console.log(hrr); } //获取 数组内指定值的 序号 function getindex(hrr,h){ for(var i=0;i<hrr.length;i++){ if(hrr[i]==h){ return i; } } } //统计所有指定class名称的元素 function getClass(a){ var doms = document.getElementsByTagName('*'); var reg = new RegExp('\\b'+a+'\\b'); //var reg = '/^\b'+a+'\b$/'; var arr = []; for(var i=0;i<doms.length;i++){ if(reg.test(doms[i].className)){ arr.push(doms[i]); } } return arr; } </script> </body> </html>