使用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 ，或者你可以直接点击此链接： 
修真院注册链接

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！