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

效果展示：

瀑布流布局是一种常用的网页设计布局方式，在该布局模式中，默认各列宽度固定；而图片会根据自身的高度自动适配并交错排列。

特点：

• 宽度相同但高度不同的排列方式为多列式结构；
  • 当页面滚动条向下滚动时，在尾部追加数据块；
  • 每行填满后，在末尾追加新的图片；
  • 当窗口大小变化时，在新尺寸下重新计算布局安排。

优点

• 减少占用空间：提升页面简洁性
  • 触摸屏设备友好程度高：通过向上滑动实现浏览操作
  • 好的视觉体验：在处理具有整齐有序高度信息时不会产生视觉压力，在层次分明的情况下可有效减少阅读疲劳

缺点

内容总长度 无法准确预测
当数据量过大时，可能导致网页加载所需资源过度消耗
在重新加载页面时很难确定上一次访问的具体信息

理想效果：

列宽固定；图片根据自身高度自动错开排列；
排列规则：