本文主要是介绍使用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实现方案。
更为清爽的浏览体验,请移步我的个人博客
天心天地生的个人博客
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧~
凭邀请码注册可享受学费减免优惠
我的邀请码：25344308 ，或者你可以直接点击此链接：
修真院注册链接
这篇关于使用js或css实现瀑布流（Pinterest）布局教程的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
