前言
首先我么来介绍介绍什么是瀑布流，瀑布流又称瀑布流式布局，是一种
多列等宽不等高的一种页面布局方式
。视觉表现为参差不齐的多栏布局。随着页面滚动条向下滚动，这种布局会不断加载数据并附加至当前的尾部。是一种多列等宽不等高的一种页面布局方式，用于图片比较复杂，图片尺寸比较复杂时可以使用的一种展示方式，这种展示方式可以使页面比较美观，让人有种错落有致的感觉。
瀑布流是一种允许用户不断往下滑动，页面自动刷新呈现内容的交互形式。瀑布流的主要特性便是错落有致，定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式。其优缺点如下：
优点如下：
-
节省空间，外表美观，更有艺术性。
-
对于触屏设备非常友好，通过向上滑动浏览
-
用户浏览时的观赏和思维不容易被打断，留存更容易。
缺点如下：
-
用户无法了解内容总长度，对内容没有宏观掌控。
-
用户无法了解现在所处的具体位置，不知道离终点还有多远。
-
回溯时不容易定位到之前看到的内容。
-
容易造成页面加载的负荷。
-
容易造成用户浏览的疲劳，没有短暂的休息时间。
多栏布局实现瀑布流
我们来看这段代码，我们是直接给最外层容器加入
cloumn-count：3
属性，将其分为三栏，然后加入
column-gap
调整每栏的之间的间距，除此之外我们还给
item
子容器加入了
break-inside：avoid
来保证每个子元素渲染完在换行。
网格布局实现瀑布流
我们再来看你这段代码，首先是将外层
wrap
容器设置为
grid
网格布局，在用
grid-template-columns: 1fr 1fr 1fr
属性将其分为三栏，在用
grid-auto-rows
设置网格内行的尺寸，最后用
column-gap
设置网格每栏的间隙。在这段网格布局中，我们还写了一段js用来获取照片的宽高用来设置每张照片占多少行，给item添加了
item.style.gridRowEnd =
span ${~~(height)}
属性
，以便确认每张照片占网格的行数，
弹性布局实现瀑布流
我们接着看这段代码，这段代码是利用了弹性布局的巧妙性，在最外层先用了一层
div
包裹，然后里面再用一层
div
包裹项目，将外层
div
横向弹性布局且默认一行。内层
div
则设为纵向弹性布局，实现瀑布流布局。
结语
这三种实现瀑布流布局都是用高级的css属性来实现的，比直接用js写会去获取每张图片的高度在进行布局会简单许多，但是各有各的有优缺点，我们根据场景合理的使用。