index.html
<!doctype html><html><head><meta charset="utf-8"><title>waterfall layout</title><link type="text/css" href="./imgs/wf.css" rel="stylesheet"/> <script type="text/javascript" src="./imgs/wf.js"></script></head><body><div id="main"> <div class="box"> <div class="pic"> <img src="imgs/0.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/1.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/2.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/3.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/4.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/5.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/6.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/7.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/8.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/9.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/10.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/11.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/12.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/13.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/14.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/15.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/16.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/17.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/18.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/19.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/20.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/21.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/22.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/23.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/24.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="imgs/25.jpg"/> </div> </div></div></body></html>
wf.css
@charset "utf-8";*{margin:0;padding:0}#main{ position: relative; margin: 10px auto 0 auto;}.box{ float:left; padding: 0 0 15px 15px; }.pic{ border: 1px solid #ccc; padding: 10px;}.box img{ width: 200px; height: auto;}
wf.js
window.onload = function(){ waterfall(); //要加载的数据，暂时写一个固定数据 var dataint = {"data":[{"src":'3.jpg'},{"src":'13.jpg'},{"src":'23.jpg'},{"src":'1.jpg'}]}; //一个判断拖动滚动条后是否加载新内容的方法 window.onscroll = function(){ if(checkscrollslide()){ //将数据块渲染到当前页的尾部 for(var i = 0; i < dataint.data.length;i++){ var parent = document.getelementbyid('main'); var newbox = document.createelement('p'); newbox.classname = 'box'; parent.appendchild(newbox); var newpic = document.createelement('p'); newpic.classname = 'pic'; newbox.appendchild(newpic); var newimg = document.createelement('img'); newimg.src = "./imgs/" + dataint.data[i].src; newpic.appendchild(newimg); waterfall(); } } }}function waterfall(){ var parent = document.getelementbyid("main"); //写一个方法根据类名box，找到所有节点 var boxarr = getbyclass(parent,'box'); //console.log(boxarr.length);//26，检验是否获取到 var bodywidth = document.body.clientwidth; //document.body.clientwidth 窗口实时显示时的body的宽度 var colwidth = boxarr[0].offsetwidth;//box p的宽度 var cols = math.floor(bodywidth / colwidth); //给main p一个宽度，从而让显示内容不会随着浮动，改变布局 var mainwidth = colwidth * cols; parent.style.csstext = 'width:' + mainwidth + 'px;'; var colsheight = [];//放列高度的数组 for(var i = 0; i < boxarr.length;i++){ var ibox = boxarr[i]; if(i < cols){ colsheight.push(ibox.offsetheight); }else{ var rarr = searchmin(colsheight); var index = rarr[0]; var minh = rarr[1]; var left = parseint(index * colwidth); var top = minh; ibox.style.position = "absolute"; ibox.style.left = left + 'px'; ibox.style.top = top + 'px'; colsheight[index] += ibox.offsetheight; } }}function getbyclass(parent,clsname){ //用通配符获得prent下的所有标签节点 var alltags = document.getelementsbytagname("*"); var arr = new array(); for(var i = 0; i < alltags.length;i++){ if(alltags[i].classname == clsname){ arr.push(alltags[i]); } } return arr;}function searchmin(arr){ var min = arr[0]; var index = 0; for(var j = 0; j < arr.length; j++){ if(arr[j] < min){ min = arr[j]; index = j; } } return [index,min]; }function checkscrollslide(){ var parent = document.getelementbyid('main'); var boxarr = getbyclass(parent,'box'); var lastbox = boxarr[boxarr.length-1]; var lbheight = lastbox.offsettop+math.floor(lastbox.offsetheight/2); console.log(lbheight); var slideh = document.body.scrolltop || document.documentelement.scrolltop; console.log(slideh); var winh = document.body.clientheight || document.documentelement.clientheight; console.log(winh); var swheight = slideh + winh; return (lbheight < swheight) ? true : false;}
相关文章推荐：
div标签：水平居中和垂直居中的实现（附代码）
css box-sizing属性（盒子模型）的用法介绍
以上就是瀑布流布局实现的代码的详细内容。