使用column-count:3实现3列瀑布流时第三列为空的修复方案问询

你用的CSS多列布局（column-count）是纵向优先填充逻辑，且默认会平衡各列高度。当4个元素高度相同时，浏览器会把它们平均分配到前两列（各2个），导致第三列空置，这是多列布局的默认平衡机制导致的。

方案一：CSS Grid Masonry布局（现代浏览器支持） #

无需JS，利用Grid的实验性masonry特性实现元素自动填充到当前高度最低的列：

.container {
  display: grid;
  grid-template-columns: repeat(3, 180px); /* 固定3列，每列宽度180px */
  grid-template-rows: masonry; /* 开启瀑布流布局 */
  gap: 24px 20px; /* 列间距24px，行内元素间距20px，替代margin-bottom */
  background-color: #f7f7f7;
  width: 588px;
}

.item {
  background-color: #e5e5e5;
  /* 高度可任意设置，无需固定值 */
}

注：grid-template-rows: masonry是实验性特性，Chrome、Edge、Firefox等现代浏览器已支持，如需兼容旧浏览器建议用方案二。

方案二：Flexbox + JS动态分配（全浏览器兼容） #

通过Flexbox创建列容器，用JS自动将元素插入到当前高度最低的列中，适配所有浏览器：

1. 修改HTML结构，先创建3个列容器：

<div class="container">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

2. 编写CSS样式：

.container {
  display: flex;
  gap: 24px; /* 列间距计算：(588 - 180*3)/2 = 24px */
  background-color: #f7f7f7;
  width: 588px;
}

.column {
  flex: 0 0 180px; /* 固定列宽 */
}

.item {
  background-color: #e5e5e5;
  margin-bottom: 20px;
  /* 高度可自定义 */
}

3. 添加JS逻辑：

const container = document.querySelector('.container');
const items = Array.from(document.querySelectorAll('.item'));
const columns = Array.from(document.querySelectorAll('.column'));

// 遍历元素，将每个元素插入到当前高度最低的列中
items.forEach(item => {
  const shortestCol = columns.reduce((prev, curr) => 
    prev.offsetHeight < curr.offsetHeight ? prev : curr
  );
  shortestCol.appendChild(item);
});

这种方式不管元素数量、高度如何变化，都会自动保持各列高度尽可能平衡，完美实现你需要的瀑布流效果。

内容的提问来源于stack exchange，提问作者user7161349