图解CSS: Grid布局（Part17）

作者：大漠 日期：2021-09-08 点击：370
CSS
Grid
图解CSS
布局
Layout
Web布局系列
会员专栏

特别声明：如果您喜欢小站的内容，可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!或添加QQ：874472854(^_^)

自从多列布局、Flexbox布局和Grid布局得到浏览器支持之后，就可以使用这些特性来实现 瀑布流的布局 ，但这些技术实现的瀑布流布局都或多或少存有一定的缺陷。不过，值得庆幸的是，CSS 网格布局的第3级（CSS Grid Layout Module Level 3） 将真正的瀑布流布局纳入了 W3C 规范中，称得上真正的瀑布流布局。不过遗憾的是，支持该规范草案的主流浏览器并不多，只有Firefox 和 Firefox Nightly。虽然这个功能还不能用于实际生产中，但你的试用以及使用之后的反馈是很有价值的，这有助于确保它满足你对这种布局的要求。

简单地说，该规范定义了 grid-template-columns 和 grid-template-rows 新的属性值，即 masonry。可以像下面这样使用，实现一个瀑布流布局：

.grid__container {
    display: grid;
    grid: masonry / 50px 100px auto;
    grid-auto-columns: 200px;
    gap: 10px;
}

.grid__container {
    display: grid;
    grid:  50px 100px auto / masonry;
    grid-auto-rows: 200px;
    gap: 10px;
}

很简单，对吗？为什么以前没有人这样做呢？最主要的原因是瀑布流布局很难标准化，也正因为这个原因，瀑布流布局直到今天才开始进入到 W3C 规范，而且还是草案当中。换句话说，到目前为止，规范中所描述有关于瀑布流布局的方案或特性都有可能随着后续的讨论和浏览器的支持的变化而变化。

即使如此，我们总算是看到了希望。接下来，将和大家一起探讨瀑布流布局相关的技术。在开始之前，我们先简单地了解什么是瀑布流布局？

什么是瀑布流布局

瀑布流布局的出现源于 Pinterest 网站的出现：

因此，有时候你会听到有人会把这种布局称为 Pinterest布局。而且这种模式的布局常用于一些图片展示的Web应用上：

瀑布流布局有着自己独特的特点。在一个容器中有很多项目（通常是图像或像文章的摘要），它们依次一个接一个地按内联方向排列。当他们移到下一行时，项目将移到第一行中较短（高度较低）的项目所留下的任何空隙中。有点类似于我们生活中”砌砖“的方式：

这种布局有点类似于网格布局中自动放置网格项目（Auto Placement）的布局，但又没有严格遵循该布局模式。

瀑布流布局真的是一个网格布局吗？

虽然瀑布流布局被纳入到CSS网格布局模块中，那么瀑布流布局真的是一个网格布局吗？就此话题，社区中很多Web专家有着不同的看法。 @Rachel Andrew 曾经这样说过：

网格不是瀑布流，因为它是一个有严格行和列的网格。如果你再看一下瀑布流创建的布局，并没有严格的行和列。

通常情况下，我们有定义好的行，但列的作用更像是一个Flexbox布局，或多列布局。你用多列布局得到的布局和瀑布流布局之间的关键区别是，在多列布局中，项目是按列排列的。通常，在瀑布流布局中，你希望它们按行排列。

@Rachel Andrew 曾一度建议不要把瀑布流布局作为CSS网格规范的一部分。主要原因是瀑布流布局看上去像网格布局，但它更像是一个相对专业的布局模式，实际上根本不是一个网格。它更类似于Flexbox布局而不是网格布局。也基于这个原因，W3C 的 CSS工作小组才把瀑布流布局当作一个独立的规范，就算是要把他和 CSS 网格规范关联起来，也只能说 CSS 瀑布流布局规范是 CSS 网格布局的一个附本。

@Jen也有过类似的观点：

CSS 瀑布流布局是一个实验性的属性，正处于规范草案的讨论阶段。它还不是官方的，而且可能会改变。不要在博文（或相关教程）中说这已是 W3C 规范，至今为止还不是规范。它只是一个实验性特性，一个原型而以。如果对瀑布流布局特性有任何想法，都可以在 CSSWG 上发表自己的看法。

开启瀑布流布局

从Caniuse.com可以得知，支持瀑布流布局的主流浏览器非常的少，到目前为止，只有 Firefox 和 Firefox Nightly 浏览器可以看到瀑布流布局的效果：

正如上图所示，要在 Firefox 或 Firefox Nightly 浏览器查看瀑布流布局的效果，还需要开启相关的配置。在 Firefox 和 Firefox Nightly浏览器的地址栏中输入 about:config，并且搜索 "masonry" 关键词，然后在搜索结果 layout.css.grid-template-masonry-value.enabled标记上双击（鼠标左键双击）其值，从false（默认值）切换到true。

你可以尝试着在修改完配置的Firefox或Firefox Nightly浏览器中打开 @Rachel Andrew在Codepen上提供的瀑布流案例，可以看到像下图这样的效果：

我们可以使用成熟的CSS布局方式实现瀑布流布局

其实在《纯CSS实现瀑布流布局》一文中，和大家一起探讨了一些实现瀑布流布局的CSS方案。这几种方案中最接近的方案就是使用CSS的多列布局。

我们使用JavaScript在<body>中动态插入51个<div class="item">，并且设置了相应的背景图像：

for (let i = 0; i <= 50; i++) {
    const div = document.createElement("div");
    div.classList.add("item");
    div.style.backgroundImage = `url(https://picsum.photos/500/500?random=${i})`;
    document.body.appendChild(div);
}

给.item设置一些基本样式：

.item {
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    height: 10em;
    position: relative;
    display: grid;
    grid-template-rows: 1fr auto;
    margin-bottom: 10px;
    break-inside: avoid;
}

并且给一些.item设置不同的高度：

.item:nth-child(2n) {
    height: 14em;
}

.item:nth-child(3n) {
    height: 18em;
}

.item:nth-child(4n) {
    height: 22em;
}

.item:nth-child(5n) {
    height: 24em;
}

.item:nth-child(6n) {
    height: 30em;
}

.item:nth-child(7n) {
    height: 34em;
}

.item:nth-child(8n) {
    height: 40em;
}

在body使用column-count和column-gap来设置列数和列与列之间的间距：

body {
    column-count: 4;
    column-gap: 10px;
}

效果如下：

从上面的效果来看，它看起来像瀑布流布局。但是，每外项目的顺序是按列排列的。如果是一个搜索结果页面，期望搜索出来的结果是排列在前面，比如说页面最顶部就能看到搜索的结果，

剩余80%内容付费后可查看

如需转载，烦请注明出处：https://www.w3cplus.com/css/grid-layout-part-17.html

如果文章中有不对之处，烦请各位大神拍正。如果你觉得这篇文章对你有所帮助，打个赏，让我有更大的动力去创作。(^_^)。看完了？还不过瘾？点击向作者提问！

赏杯咖啡，鼓励他创作更多优质内容！
返回顶部