瀑布流效果

首先可以在body中预设一个模板

如下代码

<div id="box">
        <div class="box2">
            <img src="u=1669704037,1424149186&fm=253&fmt=auto&app=138&f=JPEG.webp" alt="" >
        </div>
    </div>

然后给模板加上样式

<style>
    *{
        margin: 0;
        padding: 0;
    }

    html,body{
        height: 100%;
        
    }
    
    #box{
        column-count: 6;
    }
    .box2{
        margin-bottom: 10px;
        break-inside: avoid; 
        height: 231px;
    }
    .box2 img{
            width: 100%;

        }
</style>

因为要做出瀑布流图片排列效果，所以要给大盒子加上一个column-count，并设置为6，然后图片宽度设为100%这样就可以让图片自动按比例平铺，并一行显示6列，最终达到瀑布流效果。

预设完模板之后就可以通过js的动态控制，将内容映射到模板中去。 代码如下

function renderHTML(arr){
            box.innerHTML += arr.map(function(item){
                return `<box class="box2">
                    <img src="${item.url}">
                </box>
                `
            }).join("")
        }

然后就是懒加载效果：

其最重要的就是要知道滚动条滑动的距离，保证满足加载触发的条件具体代码如下

 window.onscroll = function(){
            var listHeight = box.offsetHeight
            var listTop = box.offsetTop
            console.log(listHeight,listTop)
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop

            var windowHeight = document.documentElement.clientHeight

            console.log(Math.round(windowHeight+scrollTop))
            // Math.round(windowHeight+scrollTop)==(box.offsetHeight+box.offsetTop)
            // if(isloading) return
            if(Math.round(windowHeight+scrollTop+1)==(listHeight+listTop)
            ){
            // console.log("到底了")
            // isloading=true
            renderHTML(arr2)
            }
        }

效果如下

屏幕录制 2023-11-05 165912