两列瀑布流_IT学堂：纯CSS的瀑布流布局方法总结

瀑布流布局出来好多年了，刚出来时，一般都采用js来实现，涌现了很多比较好的js插件，例如：masonry.js、gridify.js等等。这里就不再详说如何使用了，网上都能找到。今天讨论的是纯CSS实现瀑布流布局。

一、多个列表并列的瀑布流布局法：

这种布局方法非常简单，就是将多个列表横向排列，每个列表拥有的项都差不多。图片宽度固定，高度自动撑起来。

html：

css:

.wrap{display:flex;justify-content: space-between;}.waterfall{width:50%;}.waterfall .item img{width:100%;}

注：

1、waterfall也可以浮动，wrap清除浮动，只要两个列表在一行就行。

2、每一块 item 都是从上往下排列的，并不能实现从左往右，解决办法是：在获取数据时，需要将数据按奇偶进行分类显示(假设显示两列，多列同理)。您可以定义两个数组：listEven和listOdd，分别来接受获取的数据的偶数项和奇数项，然后分别进行渲染。这里用VUE来演示：

//假设res.data为ajax请求到的数据res.data.map(function(item,index){index%2===0 ? that.listEven.push(item) : that.listOdd.push(item);})

3、这种布局方法，会有一个问题，如果item高度左右列相差很大，就会显示有问题，如下图，解决办法给item一个max-height，超过图片这个max-height就隐藏，此外，后台在传图片时做裁切更好：

css 瀑布流

二、CSS3 column瀑布流布局法：

CSS3 column多列可以非常轻松的实现瀑布流效果，它会自动将列表项分配到根据设置的列数当中去，先看下它的常用属性：

• column-count:列数 给waterfall加
• column-width:列的宽度
• column-gap:列之间的间隙
• break-inside:avoid 禁止列表项断裂，即左边列表项的内容有可能跑到右边的最上面 给item加

html

css

.waterfall{column-count:2;}.waterfall .item{break-inside: avoid;}

效果如下：

css3瀑布流布局

注：

1、每一块 item 都是从上往下排列的，并不能实现从左往右，第一种方法采用了奇偶两个数组解决了，这个不好解决，如果带有上拉加载，不确定总个数，就更不好解决了。

2、item的上下间距尽量不要用margin，否则可能会出现下面这种情况，这是因为左列最后一个margin跑到右边上面去了，改成padding即可，因为padding属于item的内容，而break-inside: avoid则禁止item折断：

css3瀑布流布局

三、CSS3 flex竖排瀑布流布局法

CSS3的flex用法很多。大多数情况都是用来横排，将块状容器显示在一行，还有就是用来对其一行。但是，改变flex-direction就可以做到纵向排列。

html

css

.waterfall{/*flex-box*/display: flex;/*纵向排列*/flex-direction: column;/*换列*/flex-wrap: wrap;height: 100vh;}.waterfall .item{width:50%;}

注：

1、flex-wrap: wrap 是为了让item撑满waterfall的时候换列(可以理解为换行)

2、这里waterfall的height一定要写，否则，waterfall随着内容变多，不断撑高也不会换列。

3、waterfall的height要随着item的数量变化而变化，否则，一列显示不了就显示两列，两列显示不了就显示三列，为了维持固定的列数，只能不断升高waterfall的高度。

4、flex-direction: column和flex-wrap: wrap可以合并为flex-flow: column wrap;

5、与前面两种方法一样，这种方法仍然是不好解决从上往下排列而非从左往右排列的问题。

总结：纯CSS实现瀑布流，总有这样或那样的问题，最终还是要通过js来控制。如果对排序没有要求的话，第二种方法还是比较好用的。纯css实现瀑布流，大家还有什么好的方法，欢迎留言评论。关注IT学堂，会有更多惊喜哦！