概念说明

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部

瀑布流布局有优点也有缺点：

优点：节省空间，一定程度上能够缓解用户视觉疲劳，跟传统布局相比使人眼前一亮。

缺点：对于有些需要在列表页与详情页之间进行切换或页面需要放页脚时，这些情况下瀑布流布局都不适用。

实现：使用 absolute 绝对定位

html 部分代码：

<ul class="list">
	<li class="item">
		<img src="./imgs/emperor.jpeg" alt="" class="img">
		<div class="content">
			<p class="title">名字名字名字名字</p>
			<p class="desc">描述描述描述</p>
		</div>
	</li>
	<li class="item">
		<img src="./imgs/west-lake.jpeg" alt="" class="img">
		<div class="content">
			<p class="title">名字名字名字名字</p>
			<p class="desc">描述描述描述</p>
		</div>
	</li>
	<li class="item">
		<img src="./imgs/scenery.webp" alt="" class="img">
		<div class="content">
			<p class="title">名字名字名字名字</p>
			<p class="desc">描述描述描述</p>
		</div>
	</li>
	<li class="item">
		<img src="./imgs/avatar.jpeg" alt="" class="img">
		<div class="content">
			<p class="title">名字名字名字名字</p>
			<p class="desc">描述描述描述</p>
		</div>
	</li>
	<li class="item">
		<img src="./imgs/emperor.jpeg" alt="" class="img">
		<div class="content">
			<p class="title">名字名字名字名字</p>
			<p class="desc">描述描述描述</p>
		</div>
	</li>
	<li class="item">
		<img src="./imgs/avatar.jpeg" alt="" class="img">
		<div class="content">
			<p class="title">名字名字名字名字</p>
			<p class="desc">描述描述描述</p>
		</div>
	</li>
	<li class="item">
		<img src="./imgs/emperor.jpeg" alt="" class="img">
		<div class="content">
			<p class="title">名字名字名字名字</p>
			<p class="desc">描述描述描述</p>
		</div>
	</li>
</ul>

css 部分代码

.list {
	position: relative;
	margin: 20px;
	list-style: none;
}
.item {
  width: calc((100% - 40px) / 5);
  position: absolute;
  background-color: #eee;
  border-radius: 10px;
}
.img {
	width: 100%;
	border-radius: 10px 10px 0 0;
}

js 部分代码

window.onload = function () {
	loadData()
}
function loadData () {
	let list = document.getElementsByClassName('item')
	let space = 10     // 列之间的间距
	let columns = 5    // 每一行放置几列
	let arr = []       // 用于存放图片的高度
	for (let i = 0, len = list.length; i < len; i ++) {
		let itemW = list[i].offsetWidth   // 元素宽
		if (i < columns) {
			let itemH = list[i].offsetHeight  // 元素高
			list[i].style.left = i * (itemW + space) + 'px'
			list[i].style.top = 0
			arr.push(itemH)
		} else {
			let itemIndex = 0
			let heightMin = arr[itemIndex]
			for (let j = 0; j < arr.length; j ++) {
				if (heightMin > arr[j]) {
					itemIndex = j
					heightMin = arr[j]
				}
			}
			list[i].style.left = itemIndex * (itemW + space) + 'px'
			list[i].style.top = heightMin + space + 'px'
			arr[itemIndex] = heightMin + space + list[i].offsetHeight
		}
	}
}

效果如下：

这里有几个注意点：

1、当列表索引小于每行放置的列数时就表示这是第一行，否则就不是第一行。

2、当一行放满后，后面的再添加数据时需要添加在高度最小的那一列后面。

3、每次添加完数据后，需要更新最小高度，否则后面添加数据时布局会有问题