瀑布流布局-缓加载

最新推荐文章于 2024-09-20 11:38:47 发布

black_tea114514

最新推荐文章于 2024-09-20 11:38:47 发布

阅读量439

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/black_tea114514/article/details/128705545

版权

要求：

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

原理：

把要缓加载的图片存入一个数组内，运用浏览器可视窗口，滚动条滚动距离之间进行运算，即可刷新图片（如果单设置滚动条距离，会一直满足该距离，会一直加载），加入新标签节点，再运用for循环进行数组图片地址的遍历，赋给img src地址。

代码：

 <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body,html{
            height: 100%;
        }
        .box{
            width: 100%;
            background-color: antiquewhite;
            column-count: 5;
            column-gap: 10px;
            break-inside: avoid;
        }
        img{
            width: 100%;
            display: inline-block;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./4.jpg - 快捷方式.lnk" alt="">
        <img src="./bb9761c5b49e21b4d5aa03e7ddaf1a09.png - 快捷方式.lnk" alt="">
        <img src="./4.jpg - 快捷方式.lnk" alt="">
        <img src="./bb9761c5b49e21b4d5aa03e7ddaf1a09.png - 快捷方式.lnk" alt="">
        <img src="./4.jpg - 快捷方式.lnk" alt="">
        <img src="./bb9761c5b49e21b4d5aa03e7ddaf1a09.png - 快捷方式.lnk" alt="">
        <img src="./4.jpg - 快捷方式.lnk" alt="">
        <img src="./bb9761c5b49e21b4d5aa03e7ddaf1a09.png - 快捷方式.lnk" alt="">
        <img src="./4.jpg - 快捷方式.lnk" alt="">
        <img src="./bb9761c5b49e21b4d5aa03e7ddaf1a09.png - 快捷方式.lnk" alt="">
        <img src="./4.jpg - 快捷方式.lnk" alt="">
        <img src="./bb9761c5b49e21b4d5aa03e7ddaf1a09.png - 快捷方式.lnk" alt="">
        <img src="./4.jpg - 快捷方式.lnk" alt="">
        <img src="./bb9761c5b49e21b4d5aa03e7ddaf1a09.png - 快捷方式.lnk" alt="">
        <img src="./4.jpg - 快捷方式.lnk" alt="">
        <img src="./bb9761c5b49e21b4d5aa03e7ddaf1a09.png - 快捷方式.lnk" alt="">
        <img src="./4.jpg - 快捷方式.lnk" alt="">
        <img src="./bb9761c5b49e21b4d5aa03e7ddaf1a09.png - 快捷方式.lnk" alt="">
        <img src="./4.jpg - 快捷方式.lnk" alt="">
        <img src="./bb9761c5b49e21b4d5aa03e7ddaf1a09.png - 快捷方式.lnk" alt="">
        <img src="./4.jpg - 快捷方式.lnk" alt="">
        <img src="./bb9761c5b49e21b4d5aa03e7ddaf1a09.png - 快捷方式.lnk" alt="">
        <img src="./4.jpg - 快捷方式.lnk" alt="">
        <img src="./bb9761c5b49e21b4d5aa03e7ddaf1a09.png - 快捷方式.lnk" alt="">
    </div>
    <script>
        var picture = [
            {url:'./4.jpg - 快捷方式.lnk'},{url:'./bb9761c5b49e21b4d5aa03e7ddaf1a09.png - 快捷方式.lnk'},
            {url:'./4.jpg - 快捷方式.lnk'},{url:'./bb9761c5b49e21b4d5aa03e7ddaf1a09.png - 快捷方式.lnk'},
            {url:'./4.jpg - 快捷方式.lnk'},{url:'./bb9761c5b49e21b4d5aa03e7ddaf1a09.png - 快捷方式.lnk'},
            {url:'./4.jpg - 快捷方式.lnk'},{url:'./bb9761c5b49e21b4d5aa03e7ddaf1a09.png - 快捷方式.lnk'},
            {url:'./4.jpg - 快捷方式.lnk'},{url:'./bb9761c5b49e21b4d5aa03e7ddaf1a09.png - 快捷方式.lnk'},
            {url:'./4.jpg - 快捷方式.lnk'},{url:'./bb9761c5b49e21b4d5aa03e7ddaf1a09.png - 快捷方式.lnk'},
            {url:'./4.jpg - 快捷方式.lnk'},{url:'./bb9761c5b49e21b4d5aa03e7ddaf1a09.png - 快捷方式.lnk'},
            {url:'./4.jpg - 快捷方式.lnk'},{url:'./bb9761c5b49e21b4d5aa03e7ddaf1a09.png - 快捷方式.lnk'},
            {url:'./4.jpg - 快捷方式.lnk'},{url:'./bb9761c5b49e21b4d5aa03e7ddaf1a09.png - 快捷方式.lnk'},
            {url:'./4.jpg - 快捷方式.lnk'},{url:'./bb9761c5b49e21b4d5aa03e7ddaf1a09.png - 快捷方式.lnk'},
            {url:'./4.jpg - 快捷方式.lnk'},{url:'./bb9761c5b49e21b4d5aa03e7ddaf1a09.png - 快捷方式.lnk'},
            {url:'./4.jpg - 快捷方式.lnk'},{url:'./bb9761c5b49e21b4d5aa03e7ddaf1a09.png - 快捷方式.lnk'}
        ]
        var box = document.querySelector(".box")
        var img = document.querySelectorAll("img")
        window.onscroll = function(){
            var x = document.documentElement.scrollTop
            var boxHeight = box.offsetHeight
            var y = window.innerHeight
            console.log(y)
            if(boxHeight-Math.round(y+x)<1){
                for(var i=0 ;i<picture.length;i++){
                    var img = document.createElement("img");
                    box.appendChild(img)
                    img.src = picture[i]
                }
            }
        }
    </script>