03.demo 瀑布流式布局

Tsugumi
102 阅读2分钟

演示图

QQ录屏20231125194913 -original-original.gif

代码演示 详解在注释

<!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>Document</title>
    <style>
        #box{
            column-count: 6;
        }
        #box-1 img{
            width: 100%
        }
        #box-1{
            border: 1px solid black;
            padding: 10px;
        }

    </style>
</head>

<body>
    <div id="box">
        <div id="box-1"><img src="./微信图片_20230921224425.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230921224439.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230921224443.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230922211448.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230921224425.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230921224439.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230921224443.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230922211448.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230921224425.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230921224439.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230921224443.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230922211448.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230921224425.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230921224439.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230921224443.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230922211448.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230921224425.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230921224439.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230921224443.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230922211448.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230921224425.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230921224439.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230921224443.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230922211448.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230921224425.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230921224439.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230921224443.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230922211448.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230921224425.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230921224439.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230921224443.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230922211448.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230921224425.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230921224439.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230921224443.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230922211448.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230921224425.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230921224439.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230921224443.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230922211448.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230921224425.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230921224439.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230921224443.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230922211448.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230921224425.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230921224439.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230921224443.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230922211448.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230921224425.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230921224439.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230921224443.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230922211448.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230921224425.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230921224439.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230921224443.jpg" alt=""></div>
        <div id="box-1"><img src="./微信图片_20230922211448.jpg" alt=""></div> 
    </div>
    <script>
        // 初始化一个标志位，用于判断是否正在加载中
        let isloading = false;
      
        // 监听页面滚动事件
        window.onscroll = function() {
          // 获取元素的高度和位置信息
          let boxHeight = box.offsetHeight;
          let boxTop = box.offsetTop;
          let scrollTop = document.documentElement.scrollTop;
          let windowHeight = document.documentElement.clientHeight;
      
          // 如果正在加载中，则直接返回，不进行后续操作
          if (isloading) {
            return;
          }
      
          // 当页面滚动到底部时，触发加载操作
          if (Math.round(boxHeight + boxTop) - (windowHeight + scrollTop) < 10) {
            // 设置加载状态为true，避免重复加载
            isloading = true;
      
            // 使用setTimeout模拟异步加载操作
            setTimeout(function() {
              // 获取要加载的图片元素
              let img = document.getElementById("box-1");
              
              // 获取图片容器的父容器（假设它是一个瀑布流的列）
              let box = document.getElementById("box");
      
              // 将图片元素添加到瀑布流容器中
              box.appendChild(img);
      
              // 设置加载状态为false，表示加载已完成
              isloading = false;
            }, 10);
          }
        };
      </script>
      </body>
      </html>
avatar
文章
阅读
粉丝