瀑布流懒加载

mttp02

已于 2023-01-17 22:57:31 修改

阅读量181

点赞数

文章标签： javascript 前端 html

于 2023-01-17 21:52:02 首次发布

本文链接：https://blog.csdn.net/m0_74348480/article/details/128721084

版权

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

<!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>
    .a1{
       width: auto;
    }
    .a2{
       width: auto;
    }
    #box{
            column-count: 6;
        }
        #list img{
            width: 100%
        }
        #list{
            border: 1px solid black;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div id="box">
    <ul id="list">
        <img class="a1" src="./p12.webp" alt="懒加载1"/>
    </ul>
    
</div>
    <script>
        
         var arr3 =[
             {
                name:"n1",
                path:"./p1.webp"
             },
             {
                name:"n2",
                path:"./p2.webp"
             },
             {
                name:"n3",
                path:"./p3.webp"
             },
             {
                name:"n4",
                path:"./p4.webp"
             },
             {
                name:"n5",
                path:"./p5.webp"
             },
             {
                name:"n6",
                path:"./p6.webp"
             },
             {
                name:"n7",
                path:"./p7.webp"
             },
             {
                name:"n8",
                path:"./p8.webp"
             },
             {
                name:"n9",
                path:"./p9.webp"
             },
             {
                name:"n10",
                path:"./p10.webp"
             },
             {
                name:"n11",
                path:"./p11.webp"
             },
             {
                name:"n12",
                path:"./p12.webp"
             },
            
        ]
         var arr4 =[
             {
                name:"n1",
                path:"./p1.webp"
             },
             {
                name:"n2",
                path:"./p2.webp"
             },
             {
                name:"n3",
                path:"./p3.webp"
             },
             {
                name:"n4",
                path:"./p4.webp"
             },
             {
                name:"n5",
                path:"./p5.webp"
             },
             {
                name:"n6",
                path:"./p6.webp"
             },
             {
                name:"n7",
                path:"./p7.webp"
             },
             {
                name:"n8",
                path:"./p8.webp"
             },
             {
                name:"n9",
                path:"./p9.webp"
             },
             {
                name:"n10",
                path:"./p10.webp"
             },
             {
                name:"n11",
                path:"./p11.webp"
             },
             {
                name:"n12",
                path:"./p12.webp"
             },
            
        ]
        // var arr =[
        //     {

        //     }
        // ]
renderHTML(arr3)

function renderHTML( arr) {
list.innerHTML += arr.map(function (item) {
return`<li>
<img src="${item.path}" alt="">
<h3>${item.name}</h3>
</li>`
}).join("")
}

isLoading = false
window.onscroll = function(){

var listHeight = list.offsetHeight
var listTop = list.offsetTop

    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    var windowHeight = document.documentElement.clientHeight
    if((listHeight+listTop)- Math.round(windowHeight+scrollTop)<100){
console.log("到底了")
isLoading = true

setTimeout(function(){
renderHTML ( arr4)
isLoading = false
} , 1000 )


}
}
</script>
</body>
</html>