你知道瀑布模型，你知道瀑布流吗？

软件开发中你一定知道瀑布模型，但是你知道软件开发中瀑布流吗？在WEB开发有一个瀑布流你知道吗？

在讲解瀑布流之前，我们先来看一个瀑布流在网站中的实际应用。

瀑布流应用

例如上面的样式，如何来写更简单呢？我们一个元素一个元素的来写其实可以实现，但是很麻烦，你可以试想一下加入有几十个类似这样的图片及其描述，那不是要写几十个样式，如何能够简单快速完成样式呢？

我们可以使用瀑布流，什么是瀑布流呢？就是所有的子元素宽度一样，只是高度不一样，排列在一个父元素中。那如何来实现呢？

首先，确定父元素的宽度，子元素的宽度，确定每一行可以放几个子元素和子元素之间的间隔。

其次，创建一个数组，数组长度等于每一行子元素的个数，数组元素的默认值为0，数组的作用就是用来存放子元素的高度之和，然后用于规定每个元素垂直方向显示的位置。

再次，排列第一行子元素后，数组分别存放对应列的子元素的高度加上元素垂直间距；排列第二行子元素后，数组元素值再原有基础上加上第二行对应列元素的高度和元素垂直间距，依次类推。

最后，元素使用绝对定位，每个元素的水平位置x=元素列索引值n×（元素宽度width+元素之间间隙mwidth），每个元素的垂直位置y=对应数组元素列的高度。

瀑布流简图

瀑布流案例显示结果

瀑布流案例源代码