2025 年 JS 与 CSS 实现瀑布流布局：响应式 Masonry 样式教程

瀑布流布局（Masonry Layout）是一种常用于展示不规则高度内容的布局方式，广泛应用于图片墙、商品展示、博客列表等场景。传统的 CSS 布局方式（如 Flexbox、Grid）在处理不等高元素时可能出现空隙或布局不均的问题，而瀑布流布局能够有效解决这些问题，实现内容的紧凑排列。

本文将介绍如何结合 JavaScript 和 CSS 实现瀑布流布局，创建响应式、灵活的网页布局，提升用户体验和页面美观度。

CSS 实现瀑布流布局

在 CSS 中，可以使用多列布局（Multi-column Layout）来实现简单的瀑布流效果。通过设置 column-count 属性来定义列数，column-gap 属性来设置列间距，column-fill 属性来控制内容填充方式。

.container {
  column-count: 3;
  column-gap: 1rem;
  column-fill: auto;
}
.item {
  break-inside: avoid;
  margin-bottom: 1rem;
}

这种方法适用于内容较为简单的场景，但对于复杂的布局需求，可能需要结合 JavaScript 进行动态计算和调整。

JavaScript 实现瀑布流布局

为了实现更灵活的瀑布流布局，可以使用 JavaScript 动态计算每个元素的位置，并通过绝对定位将其放置在合适的位置。以下是一个基本的实现思路：

获取容器和所有子元素：首先，获取布局容器和其中的所有子元素。
计算每列的高度：根据容器的宽度和期望的列数，计算每列的宽度，并初始化一个数组来存储每列的当前高度。
确定每个元素的位置：遍历所有子元素，找到当前高度最小的列，将元素放置在该列的底部，并更新该列的高度。
更新布局：当窗口大小变化时，重新计算每列的高度和元素的位置，以保持布局的响应性。

function layout() {
  const container = document.querySelector('.container');
  const items = Array.from(container.children);
  const columnCount = 3;
  const columnHeights = Array(columnCount).fill(0);

  items.forEach(item => {
    const minColumnIndex = columnHeights.indexOf(Math.min(...columnHeights));
    const x = minColumnIndex * (container.offsetWidth / columnCount);
    const y = columnHeights[minColumnIndex];
    item.style.position = 'absolute';
    item.style.left = `${x}px`;
    item.style.top = `${y}px`;
    columnHeights[minColumnIndex] += item.offsetHeight;
  });
}
window.addEventListener('resize', layout);
layout();

这种方法能够实现高度自适应的瀑布流布局，但需要注意性能优化，避免在大量元素或频繁的窗口大小变化时出现性能问题。

结合 CSS Grid 和 JavaScript 实现瀑布流布局

为了提高布局的稳定性和可维护性，可以结合 CSS Grid 和 JavaScript 实现瀑布流布局。CSS Grid 提供了强大的布局能力，能够定义列数、间距等，而 JavaScript 可以用于动态加载内容和调整布局。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.item {
  grid-column: span 1;
}

function layout() {
  const container = document.querySelector('.container');
  const items = Array.from(container.children);
  const columnCount = 3;
  const columnHeights = Array(columnCount).fill(0);

  items.forEach(item => {
    const minColumnIndex = columnHeights.indexOf(Math.min(...columnHeights));
    const x = minColumnIndex * (container.offsetWidth / columnCount);
    const y = columnHeights[minColumnIndex];
    item.style.position = 'absolute';
    item.style.left = `${x}px`;
    item.style.top = `${y}px`;
    columnHeights[minColumnIndex] += item.offsetHeight;
  });
}
window.addEventListener('resize', layout);
layout();

这种方法结合了 CSS Grid 的布局能力和 JavaScript 的动态调整，能够实现更加灵活和响应式的瀑布流布局。

注意事项

性能优化：在实现瀑布流布局时，尤其是在大量元素的情况下，需要注意性能优化，避免出现卡顿或延迟。
响应式设计：确保布局在不同屏幕尺寸下都能正常显示，可能需要使用媒体查询来调整列数和间距。
内容加载：对于动态加载的内容，需要在内容加载完成后重新计算布局，以保持布局的正确性。

通过结合 JavaScript 和 CSS 实现瀑布流布局，可以创建灵活、响应式的网页布局，提升用户体验和页面美观度。根据具体需求，可以选择纯 CSS 实现、纯 JavaScript 实现或两者结合的方式。在实现过程中，需要注意性能优化和响应式设计，以确保布局在不同设备和屏幕尺寸下都能正常显示。