又称瀑布流式布局，是比较流行的一种网站页面布局方式。即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。

为什么使用瀑布流

瀑布流布局在我们现在的前端页面中经常会用的到，它可以有效的降低页面的复杂度，节省很多的空间，对于整个页面不需要太多的操作，只需要下拉就可以浏览用户需要看到的数据；并且，在当前这个APP至上的时代，瀑布流可以提供很好的用户体验，通过结合下拉刷新，上拉加载进行数据的懒加载等操作，对于用户的体验感来说是接近于满分的！

瀑布流的特点

其实瀑布流的特点就是参差不齐的排列方式，以及流式布局的扩展性，可以通过界面展示给用户多条数据，并且让用户可以有向下浏览的冲动。

瀑布流的代码实现

1.纯 css 瀑布流：（ multi-columns 方法 ）

// 这里是第一次接触到 column-columns 这个属性，这是一个可以设置将div元素中的文本分成几列

//默认值是：auto

//写法：

column-count:3;
-moz-column-count:3; / Firefox /
-webkit-column-count:3; / Safari and Chrome /

/ 注意：IE9及更早 IE 版本浏览器不支持 column-count 属性 /

//这里还会用到另一个属性 column-gap，用来调整边距，实现瀑布流布局

html结构代码如下：

学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧 （从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划） <div> <div> <div > 1</div> </div> <div> <divstyle="height:150px;" > 2</div> </div> <div> <divstyle="height:50px;" > 3</div> </div> <div> <div > 4</div> </div> <div> <divstyle="height:60px;" > 5 </div> </div> <div> <divstyle="height:90px;" > 6</div> </div> <div> <div> 7</div> </div> <div> <divstyle="height:120px;" > 8</div> </div> <div> <div> 9</div> </div> <div> <div > 10 </div> </div> <div> <div> 11 </div> </div> <div> <divstyle="height:100px;" > 12</div> </div> <!-- more items --> </div>

CSS代码如下：

.demo-1{ -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari 和 Chrome */ column-count:3; -moz-column-gap: 1em; -webkit-column-gap: 1em; column-gap: 1em; width: 80%; margin:0 auto; } .item { padding: 2em; margin-bottom: 2em; -webkit-column-break-inside: avoid; break-inside: avoid; /*防止断点*/ background: #ccc; text-align: center; }

效果图：

这里有个弊端，这并不符合瀑布流的原理，如果使用纯css写瀑布流，则每一块都是从上往下排列，不能做到从左到右排列，，并且不会识别哪一块图片放在哪个地方合适，若是再配合动态加载，效果会特别不好，所以只能通过JS来实现瀑布流。

那么这里用图片来分析一下我们想要的瀑布流是什么样的。

瀑布流的位置分析图解

如下方图片。假设一排放5张图片。当第一排排满足够多的等宽图片时，显示的是这样的。那么假如我们要放第6张图片的时候，应该放在什么位置呢？

如果按照我们的正常逻辑来想，应该是放在第一张图片下面，依次水平排列过去（如下图）

但现实并非如此！在瀑布流中，从第2行开始，接下去的每一张图片都会放在上行中高度最低的那一列图片下方。（如下图）