瀑布流布局

需求

  • 多个等宽图片穿插排序成六列
  • 在目前显示的最后一张图片显示之后,再进行下拉时能够在进行加载其他图片
  • 每次下拉显示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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值