瀑布流

最新推荐文章于 2024-05-23 19:27:34 发布

JIN's

最新推荐文章于 2024-05-23 19:27:34 发布

阅读量743

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_41653587/article/details/92775032

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background-color: #dedede;
            margin: 0;
            padding: 0;
        }

        .pubu-container {
            width: 80%;
            margin: 0 auto;
            border: 1px solid red;
            display: flex;
            /* 方向 */
            flex-direction: row;
            /* 可以理解成float:left;  */

        }

        .pubu-container .item {
            /* 弹性项的占比 */
            flex: 1;
            margin: 15px;
            /* border: 1px solid red; */
        }

        .pubu-container .item img {
            width: 100%;
            border: 10px solid white;
            transition: all 0.3s ease-in-out;

        }

        .pubu-container .item img:hover {
            cursor: pointer;
            box-shadow: 0px 3px 2px 1px #999;
            transform: scale(1.02);
            /*  变大1.1倍 */


        }
    </style>
</head>

<body>
    <div class='pubu-container'>
        <div class="item" id='pb-1'>
        </div>
        <div class="item" id='pb-2'>
        </div>
        <div class="item" id='pb-3'>
        </div>
        <div class="item" id='pb-4'>
        </div>

    </div>

    <script>
        //初始化大小：即屏幕默认大小
        var windowHeight = window.screen.height + 500;
        //记录图片加载数量
        var imgId = 0;

        window.onload = function () {
           insertImg();
           //监听滚动事件
            window.document.addEventListener('scroll',function(){
                console.log(1);
                //滚动上去的高度（已经滚动的高度） + 当前可视屏幕的高度（即窗口的高度） > 滚动条能够滚动的最大高度
                if(document.documentElement.scrollTop+window.screen.height>document.documentElement.scrollHeight){
                    //当再次加载图片时，需要改变预期设定的高度即初始化高度：windowHeight
                    windowHeight += 500;
                    insertImg();
                }
            })

        }

        //插入图片
        var insertImg = function(){
            var time = setInterval(() => {
                if (document.documentElement.scrollHeight > windowHeight) {
                    clearInterval(time);
                }

                var mDiv = minDiv();
                console.log(mDiv);

                //插入图片
                imgId++;
                if (imgId > 8) {
                    imgId = 1;
                }
                var img = document.createElement('img');
                img.setAttribute('src', '../images/' + imgId + '.png');
                mDiv.appendChild(img);   //相当于发出一个指令：我要插图，但是浏览器的渲染还没有完成

            }, 100);
        }


        // 1、计算最小列
        var minDiv = function () {
            //利用弹性布局设置四列，分别得到这四个div父元素
            var pb1 = document.getElementById('pb-1');
            var pb2 = document.getElementById('pb-2');
            var pb3 = document.getElementById('pb-3');
            var pb4 = document.getElementById('pb-4');

            //得到每一列中包含的子图片集
            var imgs_1 = pb1.children;
            var imgs_2 = pb2.children;
            var imgs_3 = pb3.children;
            var imgs_4 = pb4.children;

            //调用方法计算出每一列图片的总高度，用途：为计算出这四项的最小高度以插入图片
            var img1Height = jisuan(imgs_1);
            var img2Height = jisuan(imgs_2);
            var img3Height = jisuan(imgs_3);
            var img4Height = jisuan(imgs_4);

            console.log(img1Height, img2Height, img3Height, img4Height);

            //利用Math计算出最小高度
            var minHeight = Math.min(img1Height, img2Height, img3Height, img4Height);

            //将最小高度与每一列的高度进行比对，并返回最小高度所在列即div元素
            if (minHeight === img1Height) {
                return pb1;
            }
            if (minHeight === img2Height) {
                return pb2;
            }
            if (minHeight === img3Height) {
                return pb3;
            }
            if (minHeight === img4Height) {
                return pb4;
            }


        }
        //该方法用于计算某一列图片的总高度
        var jisuan = function (pbimgs) {
            //当某一列图片不存在时，直接返回0即可
            if (pbimgs === null || pbimgs.length === 0) {
                return 0;
            } else {
                var height = 0;
                //循环遍历该列的图，累加这些图的高度
                for (var i = 0; i < pbimgs.length; i++) {
                    var img = pbimgs[i];
                    var h = img.height;
                    height += h;
                }
                return height;
            }

        }



    </script>
</body>

</html>

JIN's

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
瀑布流

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫