如何使用 JS 或 CSS 实现瀑布流布局

在实现瀑布流布局中，关键在于使元素以多列形式排列且每列的高度能够根据内容动态调整，以适应不同大小的图片或内容块。通常有以下几种方法：使用纯 CSS 的 column 属性、使用 JavaScript 计算并定位每个元素、使用 CSS Flexbox 以及 CSS Grid Layout。在使用纯CSS 方法时无需额外的JS，但对浏览器的兼容性要求较高；而使用JavaScript可以实现更加灵活和兼容老旧浏览器的瀑布流布局。

一、使用 CSS column 属性

CSS column 属性能够快速实现基本的瀑布流布局。它可以将内容分割成多个列，并且当新内容被添加时，列会自动平衡内容。

.waterfall {
  column-count: 4;
  column-gap: 15px;
}
.waterfall-item {
  break-inside: avoid-column;
}

在上述代码中，我们将容器类.waterfall定义为四列，列与列之间的间隔为15像素。.waterfall-item则是每一个瀑布流中的项目，break-inside: avoid-column;是为了防止项目跨列展示。

二、使用 JavaScript 定位元素

对于要求更高或者更复杂布局的瀑布流，或者要兼容较早版本的浏览器，你可能需要使用 JavaScript 代码来计算和定位每个元素。

function layoutWaterfall() {
  let items = document.querySelectorAll('.waterfall-item');
  let columnWidth = items[0].offsetWidth;
  let numColumns = Math.floor(contAIner.offsetWidth / columnWidth);
  let columnHeights = new Array(numColumns).fill(0);
  items.forEach(item => {
    let minColumnHeight = Math.min(...columnHeights);
    let columnIndex = columnHeights.indexOf(minColumnHeight);
    item.style.position = 'absolute';
    item.style.top = `${minColumnHeight}px`;
    item.style.left = `${columnWidth * columnIndex}px`;
    columnHeights[columnIndex] += item.offsetHeight;
  });
}

在这个函数中，我们首先计算出能够放在瀑布流容器中的列数，然后依次计算每个元素应该放置的列。为了使布局均衡，我们总是将元素放在当前最短的列上。通过这种方法计算出每个项目的上边距top和左边距left来确定其在页面上的位置。

三、利用 Flexbox 进行布局

CSS Flexbox 是近年来非常受欢迎的一种布局方案，它可以通过设置容器来进行灵活的布局。

.waterfall {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: space-between;
}
.waterfall-item {
  flex: 1 1 auto;
}

Flexbox 版本的瀑布流布局较为复杂。原因是 Flexbox 的 flex-wrap: wrap; 特性在默认情况下是按行排列的，对于列式瀑布流布局，可能不会非常适用。可以考虑使用 JavaScript 辅助来确定每个项目的位置。

四、使用 CSS Grid Layout

CSS Grid Layout 为创建网页布局提供了二维网格的可能性，这让我们能够用一种全新的方式来思考布局。

.waterfall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 15px;
}

在上述代码中，我们定义了一个网格布局.waterfall。grid-template-columns定义了每列的最小和最大宽度，而grid-auto-rows定义了行的最小高度。grid-gap则设置了项目之间的间隔。这种方法可以在一定程度上实现瀑布流布局，但由于 Grid 布局是均匀排布的，所以可能不会完全符合瀑布流的不规则特性。