纯 CSS 实现瀑布流布局？Masonry Layout 了解一下！

在网页设计中，瀑布流布局以其灵动多变的视觉效果，深受设计师和用户的喜爱。想象一下，图片像瀑布一样倾泻而下，错落有致地排列，无需刻意对齐，就能营造出一种自然、活泼的氛围。过去，这种布局往往需要借助 JavaScript 才能实现，但现在，CSS 领域的新秀——Masonry Layout，正悄然改变着这一局面。本文将带你深入了解 Masonry Layout，探讨其浏览器支持现状，并提供一套渐进增强的解决方案，让你在不依赖 JavaScript 的情况下，也能轻松驾驭瀑布流布局。

什么是 Masonry Layout？

Masonry，意为“砖石结构”，顾名思义，Masonry Layout 就像砌砖一样，将元素以最佳方式排列，填满容器空间。与传统的网格布局（Grid Layout）不同，Masonry Layout 允许元素在垂直方向上自由延伸，形成高低错落的视觉效果。这种布局方式特别适合展示内容高度不定的元素，例如图片、文章摘要等。

浏览器支持现状：喜忧参半

截至目前，CSS Masonry Layout 模块仍处于草案阶段，浏览器的支持情况并不理想。你需要清楚地认识到这一点！这意味着，直接使用 grid-template-rows: masonry 属性，可能无法在所有浏览器上获得预期效果。不过，也不必灰心，一些现代浏览器已经开始逐步支持该特性，例如：

Firefox: 从版本 96 开始，Firefox 已经原生支持 CSS Masonry Layout，可以通过开启 layout.css.grid-template-masonry-value.enabled 标志来启用。
Chrome: Chrome 也在积极开发对 Masonry Layout 的支持，预计在不久的将来会正式推出。

虽然原生支持尚未普及，但这并不妨碍我们提前探索和应用 Masonry Layout 的思想。接下来，我将介绍一种渐进增强的方案，让你在现有浏览器上也能实现类似瀑布流的效果。

渐进增强方案：兼顾现在与未来

既然原生支持有限，我们就需要另辟蹊径，采用一种更具兼容性的方案。这里的核心思想是：利用 CSS Grid Layout 的特性，结合一些巧妙的技巧，模拟出 Masonry Layout 的效果。

1. 基本思路：分栏与自动排列

首先，将容器划分为多个列（column），然后让元素依次填充这些列。由于元素的高度不确定，我们需要让它们自动排列，尽可能填满每一列的空间。这可以通过以下 CSS 属性来实现：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 自动创建列，每列最小宽度 200px */
  grid-gap: 10px; /* 列间距 */
  grid-auto-rows: 10px; /* 隐式创建的行的高度 */
  grid-auto-flow: dense; /* 尽可能填满空间 */
}

.item {
  break-inside: avoid;
}

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));：这行代码定义了网格的列。repeat(auto-fill, ...) 表示自动创建列，直到填满容器。minmax(200px, 1fr) 表示每列的最小宽度为 200px，最大宽度为 1fr（即容器剩余空间的 1 等份）。
grid-gap: 10px;：设置列之间的间距，让布局看起来更清晰。
grid-auto-rows: 10px;：这行代码非常关键。它定义了隐式创建的行的高度。由于我们希望元素在垂直方向上自由延伸，这里将行高设置为一个较小的值（例如 10px）。
grid-auto-flow: dense;：这个属性告诉网格布局引擎，尽可能填满容器中的空白空间。这意味着，如果一个元素无法放入当前列，它会被自动移动到下一个可用的位置。
.item { break-inside: avoid; }：避免元素在列之间被截断，保证每个元素都完整显示在同一列中。

2. 模拟瀑布流效果：调整元素高度

上述代码已经能够实现基本的分栏和自动排列，但还不够完美。为了模拟出真正的瀑布流效果，我们需要让元素的高度有所差异。这可以通过以下方式来实现：

随机高度： 使用 JavaScript 动态设置元素的高度。例如，可以为每个元素生成一个随机数，作为其高度的倍数。
```
const items = document.querySelectorAll('.item');
items.forEach(item => {
  const randomHeight = Math.floor(Math.random() * 3) + 1; // 生成 1-3 的随机数
  item.style.gridRowEnd = `span ${randomHeight}`; // 设置元素占据的行数
});
```
这种方式简单粗暴，但效果也比较明显。你可以根据实际需求调整随机数的范围，控制元素高度的差异程度。
固定比例： 如果你的元素是图片，可以根据图片的原始比例来设置元素的高度。例如，可以为每个元素添加一个 data-aspect-ratio 属性，存储图片的宽高比，然后使用 CSS calc 函数来计算元素的高度。
```
<img class="item" src="..." data-aspect-ratio="1.5"></img>
```
```
.item {
  height: calc(200px * attr(data-aspect-ratio)); /* 200px 为列的宽度 */
}
```
这种方式可以保证图片在缩放时不会变形，同时也能实现瀑布流的效果。

3. 优化用户体验：图片懒加载

瀑布流布局通常会加载大量的图片，如果一次性加载所有图片，可能会导致页面加载缓慢，影响用户体验。为了解决这个问题，我们可以采用图片懒加载技术。其基本原理是：只加载用户可视区域内的图片，当图片滚动到可视区域时，再加载它们。

实现图片懒加载的方式有很多，这里介绍一种基于 Intersection Observer API 的方法：

const images = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      observer.unobserve(img);
    }
  });
});

images.forEach(image => {
  observer.observe(image);
});

首先，选择所有带有 data-src 属性的 img 元素。这些元素表示需要懒加载的图片。
然后，创建一个 IntersectionObserver 实例。IntersectionObserver 用于监听元素是否进入可视区域。
在回调函数中，判断元素是否进入可视区域（entry.isIntersecting）。如果是，则将 data-src 属性的值赋给 src 属性，触发图片加载。同时，移除 data-src 属性，并停止监听该元素。
最后，为每个 img 元素调用 observer.observe() 方法，开始监听。

4. 增强可访问性：语义化 HTML

在实现瀑布流布局的同时，不要忽略网页的可访问性。这意味着，要使用语义化的 HTML 标签，让屏幕阅读器等辅助设备能够正确理解网页的内容结构。

使用 <ul> 或 <ol> 标签： 如果你的瀑布流布局展示的是一组列表项，可以使用 <ul> 或 <ol> 标签来包裹这些元素。这可以告诉屏幕阅读器，这些元素之间存在某种关联。
使用 <figure> 和 <figcaption> 标签： 如果你的瀑布流布局展示的是图片，可以使用 <figure> 标签来包裹图片和标题。<figcaption> 标签用于描述图片的内容。
添加 alt 属性： 为每个 img 元素添加 alt 属性，描述图片的内容。这可以帮助屏幕阅读器用户理解图片的内容。

案例分析：图片瀑布流

为了更好地理解上述方案，我们来看一个具体的案例：实现一个图片瀑布流布局。

HTML 结构

<div class="container">
  <img class="item" src="placeholder.png" data-src="image1.jpg" data-aspect-ratio="1.33"></img>
  <img class="item" src="placeholder.png" data-src="image2.jpg" data-aspect-ratio="1.5"></img>
  <img class="item" src="placeholder.png" data-src="image3.jpg" data-aspect-ratio="1.78"></img>
  ...
</div>

container：瀑布流布局的容器。
item：每个图片元素。src 属性设置为占位图，data-src 属性存储真实的图片地址，data-aspect-ratio 属性存储图片的宽高比。

CSS 样式

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 10px;
  grid-auto-rows: 10px;
  grid-auto-flow: dense;
}

.item {
  break-inside: avoid;
  width: 100%;
  height: calc(200px * attr(data-aspect-ratio));
  object-fit: cover; /* 保持图片比例，裁剪超出部分 */
}

object-fit: cover;：这个属性可以保证图片在缩放时不会变形，并裁剪超出容器的部分。

JavaScript 代码

const images = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      observer.unobserve(img);
    }
  });
});

images.forEach(image => {
  observer.observe(image);
});

这段代码实现了图片懒加载。

总结与展望

通过上述渐进增强方案，我们可以在现有浏览器上实现类似 Masonry Layout 的瀑布流效果。虽然这种方案并非完美，但它具有良好的兼容性和可维护性，能够满足大部分场景的需求。

随着浏览器对 CSS Masonry Layout 的支持逐渐完善，我们可以期待未来能够更加轻松地实现瀑布流布局，无需依赖任何 JavaScript 代码。届时，CSS 将在网页设计领域发挥更大的作用。

现在就开始尝试 Masonry Layout 吧！即使原生支持尚未普及，你也可以通过渐进增强方案，提前体验这种强大的布局方式。相信它会为你的网页设计带来更多灵感和可能性。