瀑布流布局（multi-column多列布局）

 效果展示：

 

瀑布流布局是网页设计常见的一种布局，一般用于图片多列展示。列宽固定，图片根据自身高度自适应交错排列。 

 特点：

• 等宽不等高，多列布局；
• 随着页面滚动条向下滚动，不断加载数据块并附加至当前尾部；
• 每行排满后，新的图片添加到后面
• 窗口尺寸改变，重新计算布局

优点

• 节省空间：降低页面的复杂
• 对于 触屏设备非常友好：通过向上滑动浏览，交互方式更符合直觉
• 良好的视觉体验：浏览时不会被页面整整齐齐的高度影响，参差不齐，降低浏览的疲劳

缺点

• 内容总长度 无法掌握
• 数据过多时，容易造成页面 加载的负荷
• 再次加载时 很难定位上一次浏览的内容

理想效果：

• 列宽固定，图片根据自身高度自适应交错排列；
• 排列规则：第一行图片按顺序排满一行，后面的图片按照规则放在高度最小的列下面；
• 图片触底更新，按需加载；
• 窗口大小改变，自适应图片的列数；
• 最底部对齐；

实现方法

一、纯CSS实现（multi-column 多列布局）

用到属性

column-count ： 定义列数
column-gap ：列与列之间的间隔

特点

顺序只能是 从上到下