JS必会瀑布流

最新推荐文章于 2024-07-12 16:27:40 发布

87小太阳

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量120

点赞数

分类专栏： JS案例 JS必会项目案例文章标签： javascript css 前端

本文链接：https://blog.csdn.net/weixin_53798158/article/details/127822195

版权

JS案例同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

JS必会项目案例

5 篇文章 0 订阅

订阅专栏

<!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;
        }

        ul,
        li {
            list-style: none;
        }

        .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 {
            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; 
            /* border 内边距 都包含在width中 */
        }

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

        .loading{
            width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
            display: none;
        }
    </style>
</head>

<body>
    <div class="header">网页头部</div>
    <ul>
        
    </ul>
    <div class="loading">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01e1f35ad46d23a8012040293d688a.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670489115&t=de0dd01be2b1d3151b344b47a03adac1" alt="">
    </div>
    <div class="footer">网页底部</div>
    <script src="./jd.js"></script>
    <script>
        var ulEle = document.querySelector('ul'); //定位元素

        var pagesize = 8; // 默认一页8条数据 

        var current = 1; // 默认第一页 

        var total = Math.ceil(arrs.length / pagesize); // 总页数 

        // 为了防止 一次滚动 加载n多页  
        //设置一个变量  
        var flag = true;
        //后边每滚动鼠标一段距离就要加载一部分数据  
        // 1   0~ 7   8
        // 2   8~ 15  8
        // 3   16 ~ 23 8
        var loadingEle = document.querySelector('.loading');

        function bindHtml(){
            var bindList = arrs.slice((current-1)*pagesize,current*pagesize);
            // [{},{},{}]
            ulEle.innerHTML += bindList.reduce(function(prev,item){
                return prev + `
                <li> 
                    <a href="${item.detail_url}"><img src="${item.pic_url}" alt=""></a>
                    <p>${item.title}</p>
                    <p>价格:${item.price}</p>                    
                    <p>销量:${item.sales}</p> 
                    <p>更新时间:${item.data_update}</p>                                      
                </li>  
                `
            },'');

        } 


        // 打开页面 就得加载一部分数据  

        bindHtml()

        //滚动到 一定的位置 然后加载下一页 
        //本地读取本地数据 速度太快 感觉不到懒加载 效果 
        // 使用定时器 模拟网络加载   


        // 后一页的数据 要拼接到上一页的后边  



        //  分析: 

        // 1.准备一个函数 用来渲染数据 
        // 比如打开页面 渲染第一页的数据  

        // 2 随着浏览器的滚动  去加载下一页的数据  

        // 下一页的数据要加在后边  不能覆盖  


        window.onscroll = function(){
           //考虑一个问题 ,滚到哪里才能触发下一页 
           // 获取卷去的高度 滚动条距离上面的高度   
            var scrollTop = document.documentElement.scrollTop || 
            document.body.scrollTop;

            // 可视化窗口的高度
            var windowHeight = document.documentElement.clientHeight;


            // ul 上边的偏移量
            var ulTop = ulEle.offsetTop;

            //拿到ul的实际占地面积   内容+内边距+边框
            var ulHeight = ulEle.offsetHeight;

            if(scrollTop+windowHeight<=ulTop+ulHeight){
                return
            }

            // 如果第一个定时器没有执行完 那么就不能去加载下一页
            if(flag === false) return 

            //当来到这里 
            //说明有下一页了
            // console.log('有下一页,滚动')
            loadingEle.style.display = 'flex';
            flag = false; // 第一个定时器开始了 不能再加载了
            // 我已经开始了 其它定时器不能加载 
            //使用定时器模拟加载的效果 
            // 整个页面的代码执行完成 然后执行setTimeout
            setTimeout(function(){
                if(current == total){
                    loadingEle.style.display = 'none';
                    return
                }
                //页码累加 
                current++;
                
                //页码变化 加载变化后页码对应的数据
                bindHtml();
                loadingEle.style.display = 'none';
                flag = true; // 这一页加载完了 开始下一页吧

            },Math.floor(Math.random()*2000+1000));

            
            // window.onscrooll 事件 
            // 一滚动可以会触发 6次符合条件滚动函数  

            // 也就是触发了 6个定时器  
            // 整个页面加载完毕  
            //挨个执行这个6个定时器     
            //所以就会出现 稍微滚动一下 后边所有的页码对应的数据 全出来了 

        }


    </script>
</body>

</html>