瀑布流布局

最新推荐文章于 2025-07-22 15:31:58 发布

原创最新推荐文章于 2025-07-22 15:31:58 发布 · 226 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

需求

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

效果展示

Js实现瀑布流布局

实现原理

通过数组的映射实现图片的自动填充

具体代码

JS部分

<script>
       var arr1=[   
            {url:"./img/didi.jfif"},
            {url:"./img/black.jfif"},
            {url:"./img/jie.jfif"},
            {url:"./img/huang.jfif"},
            {url:"./img/ice.jfif"},
            {url:"./img/jie.jfif"},
            {url:"./img/huang.jfif"},
            {url:"./img/ice.jfif"},
            {url:"./img/didi.jfif"},
            {url:"./img/black.jfif"},
            {url:"./img/ice.jfif"}
        ]
        var arr2=[
            {url:"./img/didi.jfif"},
            {url:"./img/black.jfif"},
            {url:"./img/jie.jfif"},
            {url:"./img/huang.jfif"},
            {url:"./img/ice.jfif"},
            {url:"./img/jie.jfif"},
            {url:"./img/huang.jfif"},
            {url:"./img/ice.jfif"},
            {url:"./img/didi.jfif"},
            {url:"./img/black.jfif"},
            {url:"./img/ice.jfif"}
        ]
        
        isLoading = false
        // 把arr数组传入html中
        renderHTML(arr1)
        //将其映射成li标签元素节点
        function renderHTML(arr){
            list.innerHTML += arr.map(function(item){
                return `<li>
            <img src="${item.url}" alt="">
        </li>`
           }).jion("")
        }
        renderHTML(arr2)

        window.onscroll=function(){
           
            var list = document.querySelector(".list")
            var listHeight = list.offsetHeight

            var scrollTop = document.documentElement.scrollTop
            var windowHeight = document.documentElement.clientHeight

            if(isLoading) return//防止重复触发
            if ((listHeight+listTop)-Math.round(windowHeight+scrollTop)<50) {
                isLoading = true
                renderHTML(arr1)//渲染下一页图片
            }
        }
 
    </script>

完整代码

<!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>
    *{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .list{
        position: relative;
        width: 1350px;
    }
    .list img{
        display: inline-block;
        margin: 15px 15px;
        float: left;
        width: 200px;
        height: 200px;
    }
</style>
</head>
<body>
    <ul id="list">
        <img src="./img/didi.jfif" alt="">
    </ul>
    <script>
       var arr1=[   
            {url:"./img/didi.jfif"},
            {url:"./img/black.jfif"},
            {url:"./img/jie.jfif"},
            {url:"./img/huang.jfif"},
            {url:"./img/ice.jfif"},
            {url:"./img/jie.jfif"},
            {url:"./img/huang.jfif"},
            {url:"./img/ice.jfif"},
            {url:"./img/didi.jfif"},
            {url:"./img/black.jfif"},
            {url:"./img/ice.jfif"}
        ]
        var arr2=[
            {url:"./img/didi.jfif"},
            {url:"./img/black.jfif"},
            {url:"./img/jie.jfif"},
            {url:"./img/huang.jfif"},
            {url:"./img/ice.jfif"},
            {url:"./img/jie.jfif"},
            {url:"./img/huang.jfif"},
            {url:"./img/ice.jfif"},
            {url:"./img/didi.jfif"},
            {url:"./img/black.jfif"},
            {url:"./img/ice.jfif"}
        ]
        
        isLoading = false
        // 把arr数组传入html中
        renderHTML(arr1)

        function renderHTML(arr){
            list.innerHTML += arr.map(function(item){
                return `<li>
            <img src="${item.url}" alt="">
        </li>`
           }).jion("")
        }
        renderHTML(arr2)

        window.onscroll=function(){
            // 当表单整体高度等于页面可视区域高度和滚动条高度之和时，滑到最低
            var list = document.querySelector(".list")
            var listHeight = list.offsetHeight

            var scrollTop = document.documentElement.scrollTop
            var windowHeight = document.documentElement.clientHeight

            if(isLoading) return//防止重复触发
            if ((listHeight+listTop)-Math.round(windowHeight+scrollTop)<100) {
                isLoading = true
                renderHTML(arr1)//渲染下一页图片
            }
        }
 
    </script>
</body>
</html>