JS实现瀑布流页面布局

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

个人对瀑布流布局理解：

每列的宽度相等而高度不等，且第二行的第一个容器需要放在第一行高度最小的容器下面，依次类推放置。

附上代码：

代码仅实现了瀑布流的布局方式和 resize 监听，如果大家有需要，可以自己拓展下：实现监听滚动事件，页面滚动加载图片的功能。

代码中写了详细注释，可以直接使用。

<!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>瀑布流布局JS实现</title>
    </head>
    <body>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            body {
                width: 100vw;
                height: 100vh;
            }
            .container {
                width: 100vw;
                height: 100vh;
                overflow: scroll;
                position: relative;
                background-color: lightgray;
            }
            .item {
                width: 200px;
                height: auto;
                box-sizing: border-box;
                background: #fff;
                border: 1px solid #000;
                border-radius: 15px;
                text-align: center;
                font-size: 40px;
                font-weight: bold;
                position: absolute;
                top: 0;
                left: 0;
            }
            .item1,
            .item8 {
                height: 300px;
            }
            .item2,
            .item6 {
                height: 150px;
            }
            .item3,
            .item9 {
                height: 120px;
            }
            .item4,
            .item10 {
                height: 270px;
            }
            .item5,
            .item7 {
                height: 350px;
            }
        </style>
        <div class="container">
            <div class="item item1">1</div>
            <div class="item item2">2</div>
            <div class="item item3">3</div>
            <div class="item item4">4</div>
            <div class="item item5">5</div>
            <div class="item item6">6</div>
            <div class="item item7">7</div>
            <div class="item item8">8</div>
            <div class="item item9">9</div>
            <div class="item item10">10</div>
        </div>
        <script>
            function waterFullLayout() {
                console.log("start");
                // 获取页面宽度
                let pageWidth =
                    document.getElementsByClassName("container")[0].clientWidth;
                // 获取图片固定的宽度
                let itemWidth = document.getElementsByClassName("item")[0].offsetWidth;
                // 设置图片之间间距
                let gap = 10;
                // 获取一行最多可以展示几张图片
                let nums = Math.floor(pageWidth / (itemWidth + gap));
                // 瀑布流实现原则：
                // 所有图片元素绝对定位，从第二行开始，依次从第一行图片元素高度最小的下方填充，这里注意，不是从左至右填充，即优先填补空位，填补一个后，再填补下一个较大的空位
                // 定义第一行图片的所有高度的数组，之后每张图片下方填充图片后，会更新数组对应位置下的最小高度
                let heightList = [];
                let itemArr = document.getElementsByClassName("item");
                let imgLen = itemArr.length;
                for (let i = 0; i < imgLen; i++) {
                    // 如果 当前图片元素索引小于一行最多可以展示的图片个数，说明是第一行，top 已在css中默认设置为0，需要统一设置 left 值,top值如果加gap，则还需设置gap值
                    if (i < nums) {
                        // 将第一行的图片元素的高度放入 heightList 数组
                        heightList.push(itemArr[i].offsetHeight + gap);
                        itemArr[i].style.top = gap + "px";
                        itemArr[i].style.left = (itemWidth + gap) * i + "px";
                    } else {
                        // 否则从第二行开始，要根据第一行图片元素的高度，设置top和left
                        // 先假设 heightList[0] 为最小高度
                        let minItem = {
                            minHeight: heightList[0],
                            minIndex: 0,
                        };
                        for (let j = 0; j < heightList.length; j++) {
                            if (heightList[j] < minItem["minHeight"]) {
                                minItem["minHeight"] = heightList[j];
                                minItem["minIndex"] = j;
                            }
                        }
                        itemArr[i].style.top = minItem["minHeight"] + gap + "px";
                        itemArr[i].style.left =
                            (itemWidth + gap) * minItem["minIndex"] + "px";
                        // 关键步骤，更新 heightList 中对应位置下整列图片的高度，以便在下次循环时根据heightList 重新寻找最小高度
                        heightList[minItem["minIndex"]] =
                            parseFloat(itemArr[i].style.top) +
                            parseFloat(itemArr[i].offsetHeight);
                    }
                }
            }
            // 防抖
            function debounce(fn, delay) {
                let timer = null;
                return function () {
                    if (timer) {
                        clearTimeout(timer);
                    }
                    timer = setTimeout(() => {
                        fn.apply(this, arguments);
                    }, delay);
                };
            }
            window.onload = function () {
                // 为了保证页面宽度可以正常获取，onload 之后再执行
                waterFullLayout();
            };
            // 页面宽度变化要重新布局
            window.onresize = debounce(waterFullLayout, 100);
        </script>
    </body>
</html>