高级CSS属性实现的瀑布流的三种方法

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

首先我么来介绍介绍什么是瀑布流，瀑布流又称瀑布流式布局，是一种多列等宽不等高的一种页面布局方式。视觉表现为参差不齐的多栏布局。随着页面滚动条向下滚动，这种布局会不断加载数据并附加至当前的尾部。是一种多列等宽不等高的一种页面布局方式，用于图片比较复杂，图片尺寸比较复杂时可以使用的一种展示方式，这种展示方式可以使页面比较美观，让人有种错落有致的感觉。

瀑布流是一种允许用户不断往下滑动，页面自动刷新呈现内容的交互形式。瀑布流的主要特性便是错落有致，定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式。其优缺点如下：

优点如下：

• 节省空间，外表美观，更有艺术性。
• 对于触屏设备非常友好，通过向上滑动浏览
• 用户浏览时的观赏和思维不容易被打断，留存更容易。

缺点如下：

• 用户无法了解内容总长度，对内容没有宏观掌控。
• 用户无法了解现在所处的具体位置，不知道离终点还有多远。
• 回溯时不容易定位到之前看到的内容。
• 容易造成页面加载的负荷。
• 容易造成用户浏览的疲劳，没有短暂的休息时间。

多栏布局实现瀑布流

我们来看这段代码，