JS瀑布流demo效果分析代码 JS是：nction waterFull() { // 1. 设置container

效果

联想截图_20231123155337.png

分析

QQ图片20231123155031.jpg

代码


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

        .waterFull {
            position: relative;
            margin: 0 auto;
        }

        .item {
            width: 250px;
            height: auto;
            position: absolute;          
        }

        .item img {
            width: 100%;
            margin: 2px;
        }
    </style>
</head>

<body>

    <div class="waterFull" id="con">
        <div class="item"><img src=""></div>  x100
    </div>

</body>

JS是：

 //当页面加载的时候调用
        window.onload = function () {
            //页面初始化调用
            waterFull()
            //每次页面改变大小调用
            window.onresize = waterFull
        }
        function waterFull() {
            // 1. 设置container盒子的宽度
            //      注意：浏览器的可视区域的宽度 / 一个item元素的宽度 = 一行的排列的元素的个数
            let container = document.getElementById("con")
            let item = document.getElementsByClassName("item")
            //获取元素的宽度(含border，padding)
            let width = item[0].offsetWidth
            //计算出浏览器窗口的宽度
            let clientWidth = document.documentElement.clientWidth;
            //计算出应该放几列（向下取整）
            let columnCount = Math.floor(clientWidth / width)
            //设置容器（父盒子）的宽度
            container.style.width = columnCount * width + "px"

            // 2.设置每一个item元素的排列位置
            //  第一行整体的top值都是0 后面的依次找上一行高度最小的容器，在它下面进行排列
            let hrr = []
            for (let i = 0; i < item.length; i++) {
                //定位第一行的图片
                if (i < columnCount) {
                    item[i].style.top = "0px"
                    item[i].style.left = i * width + "px"
                    hrr.push(item[i].offsetHeight)
                } else {
                    //第一行之后的
                    //选择总高度最小的列
                    let min = Math.min(...hrr)
                    let index = hrr.indexOf(min)
                    //将每个元素定位到当前总高度最小的列下
                    item[i].style.top = min + "px"
                    item[i].style.left = index * width + "px"
                    //当前定位的元素加入该列
                    hrr[index] += item[i].offsetHeight
                }
            }
        }