瀑布流布局实现的代码

互联网 18-8-7
这篇文章给大家介绍的内容是关于瀑布流布局实现的代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

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属性（盒子模型）的用法介绍

以上就是瀑布流布局实现的代码的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：
免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场
标签： JavaScript
上一篇：php获取远程图片并下载保存到本地的方法分析 下一篇：div标签：水平居中和垂直居中的实现（附代码）

相关资讯