当前位置：Gxlcms > html代码 > 瀑布流布局实现的代码

瀑布流布局实现的代码

时间：2021-07-01 10:21:17 帮助过：30人阅读

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

index.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>waterfall layout</title>
  6. <link type="text/css" href="./imgs/wf.css" rel="stylesheet"/> 
  7. <script type="text/javascript" src="./imgs/wf.js"></script>
  8. </head>
  9. <body>
  10. <div id="main">
  11.     <div class="box">
  12.         <div class="pic">
  13.             <img src="imgs/0.jpg"/>
  14.         </div>
  15.     </div>
  16.     <div class="box">
  17.         <div class="pic">
  18.             <img src="imgs/1.jpg"/>
  19.         </div>
  20.     </div>
  21.     <div class="box">
  22.         <div class="pic">
  23.             <img src="imgs/2.jpg"/>
  24.         </div>
  25.     </div>
  26.     <div class="box">
  27.         <div class="pic">
  28.             <img src="imgs/3.jpg"/>
  29.         </div>
  30.     </div>
  31.     <div class="box">
  32.         <div class="pic">
  33.             <img src="imgs/4.jpg"/>
  34.         </div>
  35.     </div>
  36.     <div class="box">
  37.         <div class="pic">
  38.             <img src="imgs/5.jpg"/>
  39.         </div>
  40.     </div>
  41.     <div class="box">
  42.         <div class="pic">
  43.             <img src="imgs/6.jpg"/>
  44.         </div>
  45.     </div>
  46.     <div class="box">
  47.         <div class="pic">
  48.             <img src="imgs/7.jpg"/>
  49.         </div>
  50.     </div>
  51.     <div class="box">
  52.         <div class="pic">
  53.             <img src="imgs/8.jpg"/>
  54.         </div>
  55.     </div>
  56.     <div class="box">
  57.         <div class="pic">
  58.             <img src="imgs/9.jpg"/>
  59.         </div>
  60.     </div>
  61.     <div class="box">
  62.         <div class="pic">
  63.             <img src="imgs/10.jpg"/>
  64.         </div>
  65.     </div>
  66.     <div class="box">
  67.         <div class="pic">
  68.             <img src="imgs/11.jpg"/>
  69.         </div>
  70.     </div>
  71.     <div class="box">
  72.         <div class="pic">
  73.             <img src="imgs/12.jpg"/>
  74.         </div>
  75.     </div>
  76.     <div class="box">
  77.         <div class="pic">
  78.             <img src="imgs/13.jpg"/>
  79.         </div>
  80.     </div>
  81.     <div class="box">
  82.         <div class="pic">
  83.             <img src="imgs/14.jpg"/>
  84.         </div>
  85.     </div>
  86.     <div class="box">
  87.         <div class="pic">
  88.             <img src="imgs/15.jpg"/>
  89.         </div>
  90.     </div>
  91.     <div class="box">
  92.         <div class="pic">
  93.             <img src="imgs/16.jpg"/>
  94.         </div>
  95.     </div>
  96.     <div class="box">
  97.         <div class="pic">
  98.             <img src="imgs/17.jpg"/>
  99.         </div>
  100.     </div>
  101.     <div class="box">
  102.         <div class="pic">
  103.             <img src="imgs/18.jpg"/>
  104.         </div>
  105.     </div>
  106.     <div class="box">
  107.         <div class="pic">
  108.             <img src="imgs/19.jpg"/>
  109.         </div>
  110.     </div>
  111.     <div class="box">
  112.         <div class="pic">
  113.             <img src="imgs/20.jpg"/>
  114.         </div>
  115.     </div>
  116.     <div class="box">
  117.         <div class="pic">
  118.             <img src="imgs/21.jpg"/>
  119.         </div>
  120.     </div>
  121.     <div class="box">
  122.         <div class="pic">
  123.             <img src="imgs/22.jpg"/>
  124.         </div>
  125.     </div>
  126.     <div class="box">
  127.         <div class="pic">
  128.             <img src="imgs/23.jpg"/>
  129.         </div>
  130.     </div>
  131.     <div class="box">
  132.         <div class="pic">
  133.             <img src="imgs/24.jpg"/>
  134.         </div>
  135.     </div>
  136.     <div class="box">
  137.         <div class="pic">
  138.             <img src="imgs/25.jpg"/>
  139.         </div>
  140.     </div>
  141. </div>
  142. </body>
  143. </html>

  • wf.css

  1. @CHARSET "UTF-8";
  2. *{margin:0;padding:0}
  3. #main{
  4.     position: relative;
  5.     margin: 10px auto 0 auto;
  6. }
  7. .box{
  8.     float:left;
  9.     padding: 0 0 15px 15px; 
  10. }
  11. .pic{
  12.     border: 1px solid #ccc;
  13.     padding: 10px;
  14. }
  15. .box img{
  16.     width: 200px;
  17.     height: auto;
  18. }

  • wf.js

  1. window.onload = function(){
  2.     waterfall();
  3.     //要加载的数据，暂时写一个固定数据
  4.     var dataInt = {"data":[{"src":'3.jpg'},{"src":'13.jpg'},{"src":'23.jpg'},{"src":'1.jpg'}]};
  5.     //一个判断拖动滚动条后是否加载新内容的方法
  6.     window.onscroll = function(){
  7.         if(checkScrollSlide()){
  8.             //将数据块渲染到当前页的尾部
  9.             for(var i = 0; i < dataInt.data.length;i++){
  10.                 var parent = document.getElementById('main');
  11.                 var newBox = document.createElement('p');
  12.                 newBox.className = 'box';
  13.                 parent.appendChild(newBox);
  14.                 var newPic = document.createElement('p');
  15.                 newPic.className = 'pic';
  16.                 newBox.appendChild(newPic);
  17.                 var newImg = document.createElement('img');
  18.                 newImg.src = "./imgs/" + dataInt.data[i].src;
  19.                 newPic.appendChild(newImg);
  20.                 waterfall();
  21.             }
  22.         }
  23.     }
  24. }
  25. function waterfall(){
  26.     var parent = document.getElementById("main");
  27.     //写一个方法根据类名box，找到所有节点
  28.     var boxArr = getByClass(parent,'box');
  29.     //console.log(boxArr.length);//26，检验是否获取到
  30.     var bodyWidth = document.body.clientWidth;
  31.     //document.body.clientWidth  窗口实时显示时的body的宽度
  32.     var colWidth = boxArr[0].offsetWidth;//box p的宽度
  33.     var cols = Math.floor(bodyWidth / colWidth);
  34.     //给main p一个宽度，从而让显示内容不会随着浮动，改变布局
  35.     var mainWidth = colWidth * cols;
  36.     parent.style.cssText = 'width:' + mainWidth + 'px;';
  37.     var colsHeight = [];//放列高度的数组
  38.     for(var i = 0; i < boxArr.length;i++){
  39.         var iBox = boxArr[i];
  40.         if(i < cols){
  41.             colsHeight.push(iBox.offsetHeight);
  42.         }else{
  43.             var rArr = searchMin(colsHeight);
  44.             var index = rArr[0];
  45.             var minH = rArr[1];
  46.             var left = parseInt(index * colWidth);
  47.             var top = minH;
  48.             iBox.style.position = "absolute";
  49.             iBox.style.left = left + 'px';
  50.             iBox.style.top = top + 'px';
  51.             colsHeight[index] += iBox.offsetHeight;
  52.         }
  53.     }
  54. }
  55. function getByClass(parent,clsName){
  56.     //用通配符获得prent下的所有标签节点
  57.     var allTags = document.getElementsByTagName("*");
  58.     var arr = new Array();
  59.     for(var i = 0; i < allTags.length;i++){
  60.         if(allTags[i].className == clsName){
  61.             arr.push(allTags[i]);
  62.         }
  63.     }
  64.     return arr;
  65. }
  66. function searchMin(arr){
  67.     var min = arr[0];
  68.     var index = 0;
  69.     for(var j = 0; j < arr.length; j++){
  70.         if(arr[j] < min){
  71.             min = arr[j];
  72.             index = j;
  73.         }
  74.     }
  75.     return [index,min];    
  76. }
  77. function checkScrollSlide(){
  78.     var parent = document.getElementById('main');
  79.     var boxArr = getByClass(parent,'box');
  80.     var lastBox = boxArr[boxArr.length-1];
  81.     var lbHeight = lastBox.offsetTop+Math.floor(lastBox.offsetHeight/2);
  82.     console.log(lbHeight);
  83.     var slideH = document.body.scrollTop || document.documentElement.scrollTop;
  84.     console.log(slideH);
  85.     var winH = document.body.clientHeight || document.documentElement.clientHeight;
  86.     console.log(winH);
  87.     var swHeight = slideH + winH;
  88.     return (lbHeight < swHeight) ? true : false;
  89. }

相关文章推荐：

div标签：水平居中和垂直居中的实现（附代码）

css box-sizing属性（盒子模型）的用法介绍

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

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！