瀑布流布局是目前一种比较流行的布局模式。即多行等宽模式，后面的元素一次添加到后面，等宽不登高。
优点：可以有效的降低页面的复杂度，节省很多的空间，在app中瀑布流可以提供很好的用户体验。
特点：瀑布流的特点就是参差不齐的排列方式，以及流式布局的扩展性，可以在界面展示多条数据给用户，让用户有向下浏览的冲动。
核心原理：
- 找出高度最小的那一列，再那一列插入，然后继续找下一个高度最小的，一直循环到插满为止；
- 计算出每一列距离浏览器整体的距离；
代码示例：
html1
2
3
4
5
6
7
8
9
10
11
12<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, shrink-to-fit=no, user-scalable=no, viewport-fit=cover"/>
<meta name="theme-color" content="#000000">
<title>瀑布流</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
css1
2
3
4
5
6
7
8
9
10
11
12
13
14#root{
display: flex;
position: relative;
width: 100%;
height: 100%;
overflow-y: scroll;
overflow-x: none;
}
.item{
width: 100px;
}
.item-img{
width: 100%;
}
js1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60const images = [
'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4256474966,2292281373&fm=26&gp=0.jpg',
'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3717083495,2049140391&fm=26&gp=0.jpg',
'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3207309264,2197583591&fm=26&gp=0.jpg',
'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2300875363,445064071&fm=5',
'https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=2086869928,3196158198&fm=85&s=B220EEA60E4002C6501B7C3D0300E05A',
'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1039495642,2969284440&fm=26&gp=0.jpg',
'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2038406380,317017081&fm=5',
'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2984967009,1714293888&fm=85&app=57&f=JPEG?w=121&h=75&s=97A602AA0CD2C6D01A0733AD03007008',
'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2300875363,445064071&fm=5',
'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=598069525,3705173246&fm=5',
'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2152435263,329091142&fm=5',
'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=620185774,165030302&fm=5',
];
const configs = {
column: 3, //列数
diffX: 10, //横向间距
diffY: 10, //纵向间距
width: 140, //宽度
};
<!-- 存储高度的数组 -->
const heightArr = [];
window.onload = function () {
const root = document.querySelector('#root');
images.map((item, index) => {
createItem(root, item, index);
});
}
function createItem(root, src, index) {
const div = document.createElement('div');
div.classList.add('item');
const img = document.createElement('img');
img.src = src;
img.onload = function () {
const height = img.clientHeight;
if (index < configs.column) {
div.style.top = '0px';
heightArr.push(height);
} else {
const minV = getMin(heightArr);
const minIndex = heightArr.indexOf(minV);
index = minIndex;
div.style.top = (configs.diffY + minV) + 'px';
heightArr[minIndex] = minV + height + configs.diffY;
}
div.style.left = (configs.width + configs.diffX)*index + 'px';
}
img.classList.add('item-img');
img.classList.add('img'+ index);
div.appendChild(img);
root.appendChild(div);
}
function getMin(arr) {
return Math.min.apply(null, arr);
}
