瀑布流也称为瀑布流布局，是一种比较流行的页面布局方式，它不同于传统的分页显示，它的视觉效果是有很多栏的布局。

瀑布流的好处

节省空间，外型美观，更加美观。
对触屏设备非常友好，通过向上滑动来浏览。
用户浏览时，观察和思考不会轻易中断，保留也更容易。

瀑布流的弊端

用户不知道内容的总长度，不能从宏观上控制内容。
用户不知道现在所处的具体位置，也不知道距离终点还有多远。
回溯时不易找到先前看到的内容。
容易造成网页载入负担。
易导致用户浏览疲劳，不能有短暂休息。

适合瀑布流的场景

从瀑布流的利弊来看，在何种情况下选择瀑布流是合理的选择。

在内容以图片为主的情况下

瀑布流比较好。图像占据了较大的空间，与理解文字相比，大脑理解速度更快，短时间内能浏览的内容更多，因此如果使用分页显示，用户一定会频繁翻页，影响沉浸式体验，而瀑布流可以解决这一问题。

在信息和信息相对独立的情况下

瀑布流是更好的选择。若信息相互关联，用户一定要进行大量的回溯操作，以查看前后的信息，反之，如果信息相对独立，则可采用瀑布流，让用户同时接收来自不同地方的信息。

在用户目标不明确的情况下

在用户目标不明确的情况下，瀑布流更适合。在用户有特定需要的信息时，分页查找定位更加方便，并且在用户目标不明确时，瀑布流可以增加用户的停留时间和意外收获。

multi-column 多栏布局实现瀑布流

multi-column实现瀑布流主要依赖以下几个属性：

column-count: 设置共有几列
column-width: 设置每列宽度，列数由总宽度与每列宽度计算得出
column-gap: 设置列与列之间的间距
column-count和 column-width都可以用来定义分栏的数目，而且并没有明确的优先级之分。优先级的计算取决于具体的场景。
计算方式为：计算 column-count和 column-width转换后具体的列数，哪个小就用哪个。

<div class="masonry">
	<div class="item">
		<img src="..."/>
			<span class="title">...</span>
	</div>
	<div class="item">
		<img src="..."/>
			<span class="title">...</span>
	</div>
<!-- more items-->
</div>

.masonry{
	column-count: 3;
	column-gap: 10px;
}
.masonry .item{
	border:1px solid #999;
	margin-bottom: 10px;
}
.masonry .item img{
	width: 100%;
}

由于 multi-column布局中子元素的排列顺序是先从上往下再从左至右，所以这种方式仅适用于数据固定不变的情况，对于滚动加载更多等可动态添加数据的情况就并不适用了。

grid 布局实现瀑布流

Grid布局是最强大的 CSS 布局方案。

它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。

瀑布流以下几个属性：

display:设置为 grid指明当前容器为 Grid布局
grid-template-columns: 定义每一列的列宽
grid-template-rows: 定义每一行的行高
column-gap：用于设置列间距

<div class="masonry">
	<div class="item"></div>
	<!-- more items-->
</div>
<style>
.masonry{
	display: grid;
	grid-template-rows: 1fr 1fr 1fr; // 分为3行
	grid-template-columns: 1fr 1fr 1fr; // 分为3列
	column-gap:5px; // 列间距5px
}
</style>

Flexbox 实现瀑布流

<div class="masonry">
<!-- 第一列 -->
	<div class="column">
		<div class="item"></div>
		<!-- more items-->
	</div>
<!-- 第二列 -->
<div class="column">
	<div class="item"></div>
<!-- more items-->
</div>
<!-- 第三列 -->
<div class="column">
	<div class="item"></div>
		<!-- more items-->
	</div>
</div>

上面代码中div.masonry代表当前瀑布流容器， div.column代表每一列的容器， div.item代表每一列中的每一项。

我们需要将 div.masonry和 div.column都通过 display:flex将其设置为 Flex容器。

不同的是瀑布流容器主轴方向设置为水平方向 flex-direction:row, 列容器主轴方向设置为垂直方向 flex-direction:column

.masonry {
	display: flex; // 设置为Flex容器
	flex-direction: row; // 主轴方向设置为水平方向
}
.column {
	display: flex; // 设置为Flex容器
	flex-direction: column; // 主轴方向设置为垂直方向
}

由于当前的html结构分为了瀑布流容器和列容器，并且常见的需求图片均是从左至右再从上到下来进行排列，所以需要通过 Javascript来区分每一列的具体数据：

假设分为三列，伪代码如下:

let data1 = [], //第一列
data2 = [], //第二列
data3 = [], //第三列
i = 0;
while (i < data.length) {
	data1.push(data[i++]);
if (i < data.length) {
	data2.push(data[i++]);
}
if (i < data.length) {
	data3.push(data[i++]);
}
}
return {
	//第一列
	data1,
	//第二列
	data2,
	//第三列
	data3
};

这些场景适合前端瀑布流布局

瀑布流 的好处