js实现瀑布流布局显示图片

yrpyy

于 2023-12-03 18:33:30 发布

阅读量99

点赞数

文章标签： css javascript

本文链接：https://blog.csdn.net/2301_81302603/article/details/134768189

版权

要实现该效果要利用到瀑布流布局，另一个效果是：在显示最后一张图片后重新加载20~30张图片

思路就相当清晰了我们只需获取滚动条距顶部距离、窗口高度和页面的总高度，然后将后者减去前面两个就能得到当前距离底部的距离，当这个距离趋近于0时，我们再次生成图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            column-count: 6;
        }
        .BOX>div{
            break-inside: avoid;
        }
        img{
            width: 260px;
        }
    </style>
</head>
<body>
    <div id="box" class="BOX">
        
    </div>
    <script>
        var lianjie = ["./img/3.瀑布流img1.jpg","./img/3.瀑布流img2.jpg","img/3.瀑布流img3.webp","img/3.瀑布流img4.jpg","./img/3.瀑布流img5.jpg","./img/3.瀑布流img6.jpg","./img/3.瀑布流img7.jpeg","./img/3.瀑布流img8.jpg","./img/3.瀑布流img9.jpg","./img/3.瀑布流img10.jpeg","./img/3.瀑布流img11.jpg","./img/3.瀑布流img12.jpeg","./img/3.瀑布流img13.jpg","./img/3.瀑布流img14.jpg","./img/3.瀑布流img15.jpg","./img/3.瀑布流img16.jpeg","./img/3.瀑布流img17.jpg","./img/3.瀑布流img18.jpg","./img/3.瀑布流img19.jpeg","./img/3.瀑布流img20.jpg","./img/3.瀑布流img21.jpg","./img/3.瀑布流img22.jpeg","./img/3.瀑布流img23.jpeg","./img/3.瀑布流img24.jpeg","./img/3.瀑布流img25.jpg","./img/3.瀑布流img26.jpeg","./img/3.瀑布流img27.jpeg","./img/3.瀑布流img28.jpg","./img/3.瀑布流img29.jpg","./img/3.瀑布流img30.jpeg"]
        box.innerHTML = lianjie.map(function(item){    //页面初始显示30张图片
            return `<div><img src="${item}" alt=""></div>`
        }).join("")
        var sign = 0
        window.onscroll = function(){
            if(box.offsetHeight-(document.documentElement.clientHeight+document.documentElement.scrollTop)<3){
                var rand = Math.round(Math.random()*(30-20)+20)   //随机产生20~30随机数
                sign ++
                if(sign == 1){  //循环产生图片
                    for(var i=0;i<rand;i++){
                    var hreliver = lianjie[`${i}`]
                    console.log(hreliver)
                    box.innerHTML += `<div><img src="${hreliver}" alt=""></div>`
                }
                sign=0
                }
            }
        }
    </script>
</body>
</html>