【学习笔记48】瀑布流代码的实现

一、效果分析

1. 瀑布流: 也是分页的一种
2. 首次打开页面, 展示8条数据(因为4条不够滚动)
3. 随着页面的滚动, 加载新的数据, 拼接到老数据后边

二、逻辑分析

1. 有一个渲染函数
2. 当滚动到某一个距离的时候, 重新调用渲染函数

三、HTML和CSS代码

1、HTML代码

    <div class="header">顶部导航</div>
    <!-- 动态渲染页面 -->
    <ul></ul>
    <!-- 加载效果 -->
    <div class="loading">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F42c725b3935a1ce3e32897b9995c1b6a2e921d335690-Ck6vZO_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669994288&t=3e6b58c142daa3e4fef899cd7b6e9a0b"
            alt="">
    </div>
    <div class="footer">底部导航</div>

2、CSS代码

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

        .header,
        .footer {
            width: 1200px;
            margin: 0 auto;
            background-color: skyblue;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 50px;
            height: 120px;
            color: #fff;
        }

        .footer {
            height: 300px;
        }

        ul,
        li {
            list-style: none;
        }

        ul {
            width: 1200px;
            display: flex;
            flex-wrap: wrap;
            margin: 0 auto;
            justify-content: space-between;
            padding-top: 10px;
        }

        li {
            width: 290px;
            border: 1px solid #333;
            margin-bottom: 10px;
            padding: 5px;
            box-sizing: border-box;
        }

        li>img {
            width: 278px;
            display: block;
        }

        .loading {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;

            display: none;
        }
    </style>

3、外部文件

    <script src="./dm_list.js"></script>

4、JS代码的实现

        // 获取标签对象
        const oUl = document.querySelector('ul');                  //页面渲染
        const oDivLoading = document.querySelector('.loading');    //加载的对象

        // 定义变量 存储数据
        let currentNum = 1;   //默认当前为第一页
        let pageSize = 8;     //默认每页展示8条数据
        //每条总页数展示数据固定 所以总页数也是固定的
        let totalNum = Math.ceil(list.length / pageSize);
        let flag = true;      //定义开关变量 


        // 封装函数 渲染页面 
        function myPage(){
            // 从数组中截取数据
            let newList = list.slice((currentNum-1)* pageSize, currentNum*pageSize);

            // 根据截取的数据，渲染页面
            oUl.innerHTML += newList.reduce(function(prev, item){
                return prev + `<li>
                    <img src="${item.pic}" alt="">
                    <p>${item.name}</p>
                    <p>城市: ${item.city}</p>
                    <p>地址: ${item.address}</p>
                    <p>价格: ${item.price}</p>
                    <p>时间: ${item.showTime}</p>
                </li>`
            }, '')

        }

        // 调用函数 渲染页面
        myPage()

        // 监听页面滚动
        window.addEventListener('scroll', function(){
            // 如果或许没有数据 就不执行
            if(currentNum == totalNum) return;

            // 浏览器的可视区域 + 页面卷去的高度 > ul顶部的偏移量 + ul的窗口高度
            // 浏览器的可视区域
            let windowScroll = document.documentElement.clientHeight; 
            // 页面卷去的高度
            let windowScrollTop = document.documentElement.scrollTop;
            // ul顶部的偏移量
            let ulTop = oUl.offsetTop;
            // ul的窗口高度
            let ulHeight = oUl.offsetHeight;

            if(windowScroll + windowScrollTop < ulTop + ulHeight) return;

            if(!flag) return;
            
            // 开始请求 修改开关变量
            flag = false;

            // 打开loading图片
            oDivLoading.style.display = 'flex';

            // 请求新数据
            setInterval(function(){
                currentNum++;
                // 渲染页面
                myPage()

                flag = true;
                oDivLoading.style.display = 'none';
            }, 3000)
        })