瀑布流布局

最新推荐文章于 2024-07-10 14:03:37 发布

时不久留

最新推荐文章于 2024-07-10 14:03:37 发布

阅读量625

点赞数

分类专栏：小案例文章标签：前端 javascript css

本文链接：https://blog.csdn.net/weixin_73104281/article/details/128664590

版权

小案例专栏收录该内容

17 篇文章 0 订阅

订阅专栏

需求

多个等宽的图片进行穿插排序成六列，并且在目前显示的最后一张图片显示之后，再进行下拉时能够在进行加载其他图片，每次下拉显示20-30张图片。

原理

利用多列布局，设置六列，形成等宽效果，让图片高度为100%，自适应填满。
根据页面总高减去（滚动距离+窗口高度）判断懒加载的时机。
创建新节点加在大盒子里。
加定时器形成缓慢加载效果

<!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="./img (1).jfif" alt=""></div>
        <div id="box-1"><img src="./img (1).jpg" alt=""></div>
        <div id="box-1"><img src="./img (2).png" alt=""></div>
        <div id="box-1"><img src="./img (3).png" alt=""></div>
        <div id="box-1"><img src="./img (4).png" alt=""></div>
        <div id="box-1"><img src="./img (5).png" alt=""></div>
        <div id="box-1"><img src="./img (4).png" alt=""></div>
        <div id="box-1"><img src="./img (5).png" alt=""></div>
        <div id="box-1"><img src="./img (6).png" alt=""></div>
        <div id="box-1"><img src="./img (7).png" alt=""></div>
        <div id="box-1"><img src="./img (8).png" alt=""></div>
        <div id="box-1"><img src="./img (9).png" alt=""></div>
        <div id="box-1"><img src="./img (7).png" alt=""></div>
        <div id="box-1"><img src="./img (10).png" alt=""></div>
        <div id="box-1"><img src="./img (11).png" alt=""></div>
        <div id="box-1"><img src="./img (12).png" alt=""></div>
        <div id="box-1"><img src="./img (5).png" alt=""></div>
        <div id="box-1"><img src="./img (6).png" alt=""></div>
        <div id="box-1"><img src="./img (7).png" alt=""></div>
        <div id="box-1"><img src="./img (8).png" alt=""></div>
        <div id="box-1"><img src="./img (1).jfif" alt=""></div>
        <div id="box-1"><img src="./img (1).jpg" alt=""></div>
        <div id="box-1"><img src="./img (2).png" alt=""></div>
        <div id="box-1"><img src="./img (3).png" alt=""></div>
        <div id="box-1"><img src="./img (4).png" alt=""></div>
        <div id="box-1"><img src="./img (10).png" alt=""></div>
        <div id="box-1"><img src="./img (11).png" alt=""></div>
        <div id="box-1"><img src="./img (12).png" alt=""></div>
        <div id="box-1"><img src="./img (13).png" alt=""></div>
        <div id="box-1"><img src="./img (14).png" alt=""></div>
        <div id="box-1"><img src="./img (11).png" alt=""></div>
        <div id="box-1"><img src="./img (7).png" alt=""></div>
        <div id="box-1"><img src="./img (8).png" alt=""></div>
        <div id="box-1"><img src="./img (9).png" alt=""></div>
        <div id="box-1"><img src="./img (7).png" alt=""></div>
        <div id="box-1"><img src="./img (10).png" alt=""></div>
        <div id="box-1"><img src="./img (11).png" alt=""></div>
        <div id="box-1"><img src="./img (12).png" alt=""></div>
        <div id="box-1"><img src="./img (13).png" alt=""></div>
        <div id="box-1"><img src="./img (14).png" alt=""></div>
        <div id="box-1"><img src="./img (11).png" alt=""></div>
        <div id="box-1"><img src="./img (11).png" alt=""></div>
        <div id="box-1"><img src="./img (12).png" alt=""></div>
        <div id="box-1"><img src="./img (13).png" alt=""></div>
        <div id="box-1"><img src="./img (14).png" alt=""></div>
        <div id="box-1"><img src="./img (11).png" alt=""></div>
        
    </div>
    <script>
        
        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
            //触发不了，它一直为false，直到到底
            if(Math.round(boxheight+boxtop)-(windowheight+scrolltop)<10){
                isloading=true
                setTimeout(function(){
                    let img=document.getElementById("box-1")
                    let box=document.getElementById("box")
                    box.appendChild(img)
                    isloading=false
                },10)
                
                
            }
        }
    </script>
</body>
</html>