瀑布流样式

最新推荐文章于 2024-09-14 18:52:56 发布

l20040121_

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量104

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/l20040121_/article/details/128719833

版权

要求：多个等宽的图片进行穿插排序成六列，并且在目前显示的最后一张图片显示之后，再进行下拉时能够在进行加载其他图片，每次下拉显示20-30张图片。
实现原理：
1.使用多列布局将图片设置成六列
2.根据页面总高-（窗口高度+滚动距离）创建加载节点，添加if(isloading)return防止一直触发
3.添加一个定时器实现缓慢加载效果

!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{
            padding: 10px;
        }

    </style>
</head>

<body>
    <div id="box">
        <div id="box1"><img src="./R-C.png" alt=""></div>
        <div id="box1"><img src="./-C.png" alt=""></div>
        <div id="box1"><img src="./-C.png" alt=""></div>
        <div id="box1"><img src="./-C.png" alt=""></div>
        <div id="box1"><img src="./R-C.png" alt=""></div>
        <div id="box1"><img src="./R-C.png" alt=""></div>
        <div id="box1"><img src="./R-C.png" alt=""></div>
        <div id="box1"><img src="./R-C.png" alt=""></div>
        <div id="box1"><img src="./-C.png" alt=""></div>
        <div id="box1"><img src="./-C.png" alt=""></div>
        <div id="box1"><img src="./OIP-C (1).jfif" alt=""></div>
        <div id="box1"><img src="./OIP-C (1).jfif" alt=""></div>
        <div id="box1"><img src="./OIP-C (1).jfif" alt=""></div>
        <div id="box1"><img src="./OIP-C (1).jfif" alt=""></div>
        <div id="box1"><img src="./OIP-C (1).jfif" alt=""></div>
        <div id="box1"><img src="./OIP-C (1).jfif" alt=""></div>
        <div id="box1"><img src="./OIP-C (1).jfif" alt=""></div>
        <div id="box1"><img src="./OIP-C.jfif" alt=""></div>
        <div id="box1"><img src="./OIP-C.jfif" alt=""></div>
        <div id="box1"><img src="./OIP-C.jfif" alt=""></div>
        <div id="box1"><img src="./OIP-C.jfif" alt=""></div>
        <div id="box1"><img src="./OIP-C.jfif" alt=""></div>
        <div id="box1"><img src="./OIP-C.jfif" alt=""></div>
        <div id="box1"><img src="./OIP-C.jfif" alt=""></div>
        <div id="box1"><img src="./OIP-C.jfif" alt=""></div>
        <div id="box1"><img src="./OIP-C.jfif" alt=""></div>
        <div id="box1"><img src="./-C.png" alt=""></div>
        <div id="box1"><img src="./-C.png" alt=""></div>
        <div id="box1"><img src="./-C.png" alt=""></div>
        <div id="box1"><img src="./OIP-C (1).jfif" alt=""></div>
        <div id="box1"><img src="./OIP-C (1).jfif" alt=""></div>
        <div id="box1"><img src="./-C.png" alt=""></div>
        <div id="box1"><img src="./-C.png" alt=""></div>

    
    </div>
    <script>
        
        isloading=false
        window.onscroll=function(){
            var boxheight=box.offsetHeight
            var boxtop=box.offsetTop
            var scrolltop=document.documentElement.scrollTop
            var windowheight=document.documentElement.clientHeight
            if(isloading) return
            if(Math.round(boxheight+boxtop)-(windowheight+scrolltop)<10){
                isloading=true
                setTimeout(function(){
                    var img=document.getElementById("box1")
                    var box=document.getElementById("box")
                    box.appendChild(img)
                    isloading=false
                },10)
                
                
            }
        }
    </script>
</body>
</html>