瀑布流

最新推荐文章于 2024-01-27 11:39:47 发布

yl107

最新推荐文章于 2024-01-27 11:39:47 发布

阅读量206

点赞数

分类专栏： js js动态效果练习

本文链接：https://blog.csdn.net/yl107/article/details/74998881

版权

js 同时被 2 个专栏收录

20 篇文章 1 订阅

订阅专栏

js动态效果练习

9 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        #myList{
            width: 860px;
            background: pink;
            margin:0 auto;
            overflow: hidden;
        }
        #myList li{
            list-style:none;
            width: 200px;
            float:left;
            margin-right: 20px;
        }
        #myList li:last-child{
            margin-right: 0;
        }
        li img{
            width: 100%;
        }
        #footer{
            height: 50px;
            background: red;
        }
    </style>
</head>
<body>
    <ul id="myList">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div id="footer"></div>
    <script>
        var myList = document.getElementById('myList');
        var lis = myList.getElementsByTagName('li');
        var footer = document.getElementById('footer');
        // 定义数组用于存放所有图片的路径
        var arr = [];
        // 创建变量，控制加载次数
        var start = 0;
        var end = 9;
        // 通过循环，生成图片路径并存入数组
        for(var i=0;i<180;i++){
            arr[i] =  'pblimg/img (' + (i+1) + ').jpg';
        }
        // 预加载
        var imgLength = 0;
        for(var i=0;i<180;i++){
            var makeImg = new Image();
            makeImg.src = arr[i];
            makeImg.onload = function(){
                imgLength++;
                if(imgLength == 180){
                    waterfall();
                }
            }
        }
        // 创建函数，执行插入图片的操作
        function waterfall(){
            var i = start * 20;
            var maxi = i + 20;
            for(i;i<maxi;i++){
                var newImg = document.createElement('img');
                newImg.src = arr[i];
                var minLi = lis[0];
                for(var j=0;j<lis.length;j++){
                    // console.log(lis[j].offsetHeight);
                    if(lis[j].offsetHeight < minLi.offsetHeight){
                        minLi = lis[j];
                        // console.log(minLi.offsetHeight); 
                    }
                }
                minLi.appendChild(newImg);
            }
            start++;
        }


        // 懒加载
        window.onscroll = function(e){
            var e = e || window.event;
            var h1 = document.documentElement.clientHeight;
            var h2 = document.documentElement.scrollTop || document.body.scrollTop;
            if(footer.offsetTop < h1+h2){
                if(start == end){
                    // 如果达到最大加载次数，就停止执行
                    return;
                }
                waterfall();
            }
        }

    </script>
</body>
</html>