简单的两列瀑布流，模拟异步加载

最新推荐文章于 2023-02-27 17:09:52 发布

dawn3881071

最新推荐文章于 2023-02-27 17:09:52 发布

阅读量334

点赞数

原文链接：http://www.cnblogs.com/target-lyl/p/10309347.html

版权

<html>
<head>
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Cache-Control" content="no-cache">
</head>
<body>
    <!--
        两列瀑布流显示
            思路
                把每列的高度做比较
            步骤
            1.先把图片数据异步获取的，setTimeout进行模拟获取。
            2.把获取到的图片，先等资源加载完。
            3.进行显示一张，递归进行再显示一张（这边应该还可以优化）
            4.模拟滚动加载。
    -->
    <div class="left"></div>
    <div class="right"></div>
    <style>
    .left,.right{
        width:50%;
    }
    .left{
        float:left;
    }
    .right{
        float:right;
    }
    p{
        overflow: auto;
        text-align: center;
        margin: 5px;
        border-radius: 4px;
        cursor: pointer;
        width: 95%;
        break-inside: avoid;
        box-sizing: border-box;
    }
    img{
        width:100%;
    }
    </style>
    <script>
        /**
         * 全局变量
         * */
        var imgs = [
            '',
            'http://img5.duitang.com/uploads/item/201411/07/20141107164412_v284V.jpeg',
            'http://wx4.sinaimg.cn/large/006WfoFPly1fq0jo9svnaj30dw0dwdhv.jpg',
            'http://img4.duitang.com/uploads/item/201407/14/20140714234214_4w8hR.jpeg',
            'http://img3.imgtn.bdimg.com/it/u=3077900768,3740996753&fm=11&gp=0.jpg',
            'http://pic2.zhimg.com/v2-f429c56fa194407db5da50259fc117d5_b.jpg'
        ];
        var l_height = 0;//左边高度
        var r_height = 0;//右边高度
        var arr = [];//存储异步数据的内容
        var isload = true;//滑动是否加载
    
        //元素标签
        var ele_left = document.getElementsByClassName('left')[0];
        var ele_right = document.getElementsByClassName('right')[0];
    
        /**
         * 获取1-5随机数
         * */
        function getRandNum(){
            return Math.floor(Math.random()*5+1);
        }
    
        /**
         * 获取图片数据
         * */
        function loadMore(){
            setTimeout(()=>{
                t = 0;//全局变量
                for(var i=0;i<10;i++){
                    arr.push(getRandNum());
                }
                show();
            },300);
        }
        /**
         * dom操作显示
         * */
        function show(){
            if(t==10)return isload = true;
            var img = document.createElement('img');
            img.src = imgs[arr[t]];
            img.onload = function(p){
                t++;
                var p = document.createElement('p');
                p.appendChild(this);
                if(ele_left.offsetHeight > ele_right.offsetHeight){
                    ele_right.appendChild(p);
                }else{
                    ele_left.appendChild(p);
                }
                show();
            }
        }
        /**
         * 滑动加载
         * */
        window.onscroll=function(){
            if(
                isload &&
                (   
                    (document.body.scrollHeight - window.screen.availHeight-document.getElementsByTagName('html')[0].scrollTop<100 )
                    || 
                    (document.body.scrollHeight - window.screen.availHeight-document.body.scrollTop<100 )
                )
            ){
                isload = false;//正在进行加载.不需要重复加载
                loadMore();
            }
        };
    
        //首次执行
        (function(){
            loadMore();
        })();
    </script>
</body>
</html>

转载于:https://www.cnblogs.com/target-lyl/p/10309347.html

dawn3881071

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简单的两列瀑布流，模拟异步加载

<html><head> <meta charset="UTF-8"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=device-width,initial-s...
复制链接

扫一扫