使用js或css实现瀑布流（Pinterest）布局教程

瀑布流，又称瀑布流式布局。这种布局适合于小数据块，每个数据块内容相近且没有侧重。通常，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。

瀑布流布局实例

一、JS实现

• 代码：js实现瀑布流布局代码
• demo：js实现瀑布流布局demo

二、CSS实现

1. Multi-columns
2. Flexbox
3. Grid

总结：这篇文章主要介绍了如何实现瀑布流的布局。文章简单介绍了css三种实现方案：Multi-columns、Flexbox和Grid。从上面的示例或者实现手段而言，较为友好的是Flexbox的方案。当然，随着CSS Grid特性的完善，使用Grid实现瀑布流布局将会变得更为简单和友好。以及一种相对简单的js实现方案。