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

瀑布流布局实例

一、js实现

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

demo：js实现瀑布流布局demo

二、css实现

1、Multi-columns

首先最早尝试使用纯CSS方法解决瀑布流布局的是CSS3 的Multi-columns。其最早只是用来用来实现文本多列排列（类似报纸杂志样的文本排列）。但对于前端同学来说，他们都是非常具有创意和创新的，有人尝试通过Multi-columns相关的属性column-count、column-gap配合break-inside来实现瀑布流布局。

2、Flexbox

3、Grid

总结：

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