瀑布流布局 - Ocean Han

642 字

3 分钟

瀑布流布局

2023-03-03

前端

JS

瀑布流布局#

TIP
比较流行的一种布局方案，视觉表现为参差不齐的多栏布局,随着页面滚动条滚动，会不断添加数据块并附加到尾部，瀑布流的主要特性便是错落有致，定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式。

Demo: JS动态添加#

:::tip 思路

记录每一列的高度，子绝父相定位，利用top和left控制位置，每次增加新成员时，找到高度最小的那一列，并将新成员至于其下方，最后更新每一列的高度。

同时也可利用flex弹性布局或Css3新增的column-*多列布局来实现，不过仅限于一次性加载展示，不需要动态添加的场景。

:::

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
    <title>瀑布流布局</title>
8
    <style>
9
        #container {
10
            position: relative;
11
        }
12
        .item {
13
            position: absolute;
14
            display: flex;
15
            justify-content: center;
16
            align-items: center;
17
            color: #fff;
18
        }
19
    </style>
20
</head>
21
<body>
22
    <div id="container"></div>
23

24
    <script>
25
        const column = 3;
26
        let counter = 0;
27
        const columnHeight = Array(column).fill(0);
28
        const container = document.getElementById('container');
29
        const colorList = ["#EAA78C", "#F9CD82", "#9ADEAD", "#9CB6E9", "#E49D9B", "#97D7D7", "#ABA0CA", "#9F8BEC", "#ACA4D5", "#6495ED", "#7BCDA5", "#76B4EF", "#E1C38F", "#F6C46A", "#B19ED1", "#F09B98", "#87CECB", "#D1A495", "#89D196", "#FE9E9F", "#93BAFF", "#D999F9", "#81C784", "#FFCA62", "#FFA477"];
30

31
        // 生成随机数
32
        function random(min = 0, max = 1) {
33
            return min + ~~((max - min) * Math.random());
34
        }
35
        // 查找高度最小的列
36
        function findMinColumn(arr) {
37
            let min = arr[0];
38
            let index = 0;
39
            arr.forEach((v, i) => {
40
                if (v < min) {
41
                    min = v;
42
                    index = i;
43
                }
44
            });
45
            return [index, min];
46
        }
47
        function appendImg() {
48
            const gap = 3; //   间隔
49
            for (let i = 0; i < 12; ++i) {  //  每次加载12个元素
50
                const unit = {
51
                    height: random(100, 500), // 随机一个高度
52
                    width: 300, //  定宽
53
                    color: colorList[random(0, colorList.length - 1)]  //  随机颜色
54
                }
55
                const [minIndex, min] = findMinColumn(columnHeight); // 获取高度最小列及下标
56
                const d = document.createElement('div');
57
                d.className = 'item';
58
                d.style.background = unit.color;
59
                d.style.height = `${unit.height}px`;
60
                d.style.width = `${unit.width}px`;
61
                d.style.top = `${min + gap}px`; //  上偏移
62
                d.style.left = `${(300 + gap) * minIndex}px`;   //  设置左偏移
63
                d.innerText = `${++counter}#${unit.width}x${unit.height}`;  //  设置文字
64
                columnHeight[minIndex] += (unit.height + gap);  //  添加后更新列的长度
65
                container.appendChild(d);   //  添加节点
66
            }
67
        }
68
        // 初始化
69
        function init() {
70
            appendImg();    //  初始加载
71
            // 是否有某列高度大于屏幕高度
72
            let endLoad = columnHeight.some(v => v > window.innerHeight);
73
            if (!endLoad) init();   // 如果没有，就递归调用继续加载
74
        }
75
        (function () {
76
            init(); //  打开页面自动加载
77
        })()
78

79
        // 处理浏览器触底事件
80
        window.onscroll = function () {
81
            let marginBottom = 0;
82
            if (document.documentElement.scrollTop) {
83
                let scrollHeight = document.documentElement.scrollHeight;
84
                let scrollTop = document.documentElement.scrollTop + document.body.scrollTop;
85
                let clientHeight = document.documentElement.clientHeight;
86
                marginBottom = scrollHeight - scrollTop - clientHeight;
87
            } else {
88
                let scrollHeight = document.body.scrollHeight;
89
                let scrollTop = document.body.scrollTop;
90
                let clientHeight = document.body.clientHeight;
91
                marginBottom = scrollHeight - scrollTop - clientHeight;
92
            }
93
            if (marginBottom <= 0) appendImg();
94
        }
95
    </script>
96
</body>
97
</html>