瀑布流布局columns

偏执zz

已于 2023-07-20 11:00:16 修改

阅读量175

点赞数

分类专栏： CSS 文章标签： css javascript 前端 html css3

于 2018-06-14 18:30:08 首次发布

本文链接：https://blog.csdn.net/qq_37804387/article/details/130435314

版权

CSS 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

瀑布流布局其核心是基于一个网格的布局，而且每行包含的项目列表高度是随机的(随着自己内容动态变化高度)，同时每个项目列表呈堆栈形式排列，最为关键的是，堆栈之间彼此之间没有多余的间距差存大。还是上张图来看看我们说的瀑布流布局是什么样子。

image

当初要实现这样的布局都是依赖于JavaScript来实现，所以当时出现过很多实现瀑布流布局的插件。比如Masonry、Isotope等都是非常有名的插件。但使用纯CSS来实现，当时还是非常困难的，不管是使用float还是inline-block布局都无法很好的控制列表项目堆栈之间的间距。最终得到的效果就像下面这样：

image

现在距离2012年已经过去了五个年头，CSS的技术更新也是日新月异，在这几年当中出现了很多新的布局方法，比如多列布局multi-columns、Flexbox布局以及今年浏览器支持有Grid布局。既然CSS的布局有这么多的变化，那么今天有没有不借助任何JavaScript(纯CSS方案)能否实现瀑布流布局？答案是肯定的，接下来的内容，我们就使用不同的CSS布局方案来实现瀑布流布局。

Multi-columns

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

比如我们有一个类似这样的HTML结构:

<div class="masonry">
    <div class="item">
        <div class="item__content">
        </div>
    </div>
    <div class="item">
        <div class="item__content">
        </div>
    </div>
    <!-- more items -->
</div>

其中div.masonry是瀑布流的容器，其里面放置了n个列表div.item。为了节约篇幅，上面代码仅列了两个。结构有了，现在来看CSS。在.masonry中设置column-count和column-gap，前者用来设置列数，后者设置列间距：

.masonry {
    column-count: 5;
    column-gap: 0;
}

上面控制了列与列之间的效果，但这并不是最关键之处。当初纯CSS实现瀑布流布局中最关键的是堆栈之间的间距，而并非列与列之间的控制(说句实话，列与列之间的控制float之类的就能很好的实现)。找到实现痛楚，那就好办了。或许你会问有什么CSS方法可以解决这个。在CSS中有一个break-inside属性，这个属性也是实现瀑布流布局最关键的属性。

.item {
    break-inside: avoid;
    box-sizing: border-box;
    padding: 10px;
}

其中break-inside:avoid为了控制文本块分解成单独的列，以免项目列表的内容跨列，破坏整体的布局。当然为了布局具有响应式效果，可以借助媒体查询属性，在不同的条件下使用column-count设置不同的列，比如：

.masonry {
    column-count: 1; // one column on mobile
}
@media (min-width: 400px) {
    .masonry {
        column-count: 2; // two columns on larger phones
    }
}
@media (min-width: 1200px) {
    .masonry {
        column-count: 3; // three columns on...you get it
    }
}
<!-- etc. -->

比如下面的这个示例：

<iframe id="ybyvEM" src="https://codepen.io/airen/embed/ybyvEM?height=400&theme-id=0&slug-hash=ybyvEM&default-tab=result&user=airen" scrolling="no" frameborder="0" height="400" allowtransparency="true" allowfullscreen="true" class="cp_embed_iframe undefined" style="box-sizing: inherit; width: 940px; overflow: hidden;"></iframe>

看到上面示例的效果，这个时候是不是有点成就感了，是不是觉得CSS更神奇了？