二十六、瀑布流滚动加载更多（2021/4/30）

古城微笑少年丶 2023-01-18 04:21 267阅读 0赞

原理图片：  
![在这里插入图片描述][2021043023591181.png]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>瀑布流实现</title>
      <style>
        * { 
          padding: 0;
          margin: 0;
        }
    
        .item { 
          position: absolute;
        }
    
        img { 
          width: 220px;
          display: block;
        }
      </style>
    </head>
    
    <body>
      <div id="box">
        <div class="item"><img src="./pic/1.jpeg" alt=""></div>
        <div class="item"><img src="./pic/2.jpeg" alt=""></div>
        <div class="item"><img src="./pic/3.jpeg" alt=""></div>
        <div class="item"><img src="./pic/4.jpeg" alt=""></div>
        <div class="item"><img src="./pic/1.jpeg" alt=""></div>
        <div class="item"><img src="./pic/2.jpeg" alt=""></div>
        <div class="item"><img src="./pic/3.jpeg" alt=""></div>
        <div class="item"><img src="./pic/4.jpeg" alt=""></div>
        <div class="item"><img src="./pic/1.jpeg" alt=""></div>
        <div class="item"><img src="./pic/2.jpeg" alt=""></div>
        <div class="item"><img src="./pic/3.jpeg" alt=""></div>
        <div class="item"><img src="./pic/4.jpeg" alt=""></div>
        <div class="item"><img src="./pic/1.jpeg" alt=""></div>
        <div class="item"><img src="./pic/1.jpeg" alt=""></div>
        <div class="item"><img src="./pic/2.jpeg" alt=""></div>
        <div class="item"><img src="./pic/3.jpeg" alt=""></div>
        <div class="item"><img src="./pic/4.jpeg" alt=""></div>
        <div class="item"><img src="./pic/1.jpeg" alt=""></div>
        <div class="item"><img src="./pic/2.jpeg" alt=""></div>
        <div class="item"><img src="./pic/3.jpeg" alt=""></div>
        <div class="item"><img src="./pic/4.jpeg" alt=""></div>
        <div class="item"><img src="./pic/1.jpeg" alt=""></div>
        <div class="item"><img src="./pic/2.jpeg" alt=""></div>
        <div class="item"><img src="./pic/3.jpeg" alt=""></div>
        <div class="item"><img src="./pic/4.jpeg" alt=""></div>
      </div>
      <script>
        var box = document.getElementById("box");
        var items = box.children;
        var gap = 10
    
        window.onload = function () {  //该函数是元素已经全部加载进页面之后才会执行，这样才能获取到图片的宽高
          waterfall()
          function waterfall() { 
            // 视口的高度
            var pageWidth = getClient().width
            var itemWidth = items[0].offsetWidth
            var colums = parseInt(pageWidth / (itemWidth + gap))
            // 里面放的是高度的值
            var arr = []
            for (var i = 0; i < items.length; i++) { 
              if (i < colums) { 
                // 确定第一行
                items[i].style.top = 0
                items[i].style.left = (itemWidth + gap) * i + 'px'
                arr.push(items[i].offsetHeight)
              } else { 
                // 其他行
                // 找到第一行的最小高度 和最小的索引
    
                var minHeight = arr[0]
                var index = 0
    
                for (var j = 0; j < arr.length; j++) { 
                  if (minHeight > arr[j]) { 
                    minHeight = arr[j]
                    index = j
                  }
                }
                // 做什么
    
                // 设置下一行第一个盒子的位置 第一张图片的位置
                items[i].style.top = arr[index] + gap + 'px'
                //left
                items[i].style.left = items[index].offsetLeft + 'px'
    
                // 改变最小列的高度
                arr[index] = arr[index] + items[i].offsetHeight + gap
    
              }
            }
          }
    
          window.onscroll = function(){ 
          // 加载图片的时机是怎么把握的
          // 窗口高度 + 滚动的高度 大于或等于 最后一张图片的Top值
          if(getClient().height + getScrollTop() >= items[items.length - 1].offsetTop){ 
            //最后一张图片都没有了 肯定要加载其他的 
            //模拟后端传回的图片数据
            var datas = [
            "./pic/1.jpeg",
            "./pic/2.jpeg",
            "./pic/3.jpeg",
            "./pic/4.jpeg",
            "./pic/1.jpeg",
            "./pic/2.jpeg",
            "./pic/3.jpeg",
            "./pic/4.jpeg",
            "./pic/1.jpeg",
            "./pic/2.jpeg",
            "./pic/3.jpeg",
            "./pic/4.jpeg"
            ]
    
            for(var i = 0; i <datas.length;i++){ 
              var div = document.createElement('div')
              div.className = "item"
              div.innerHTML = '<img src=" '+ datas[i] +'" alt="">'
              box.appendChild(div)
            }
            waterfall();
          }
        }
    
        }
    
    
        // 兼容
    
        function getClient() { 
          return { 
            width: window.innerWidth || document.documentElement.clientWidth ||
              document.body.clientWidth,
            height: window.innerHeight || document.documentElement.clientHeight ||
              document.body.clientHeight,
          }
        }
    
        // 滚动高度
        function getScrollTop(){ 
          return window.pageYOffset || document.documentElement.scrollTop
        }
      </script>
    </body>
    
    </html>

[2021043023591181.png]: /images/20221021/4a16b50d8e9040f89a2b420ae849038a.png