如何按列而非按行排列可变高度卡片以消除垂直空白

现有代码：

<div className="row">
  {data.map(datum => <Card field={datum.field} />)}
</div>

其中Card组件带有className="col-lg-3"，是可变高度组件。当前布局会导致短卡片下方出现空白，下一行卡片垂直对齐，效果如下：

Aaa|Bbb|Ccc
aaa|   |ccc
   |   |ccc
Ddd|Eee|Fff
ddd|eee|   
...

期望实现无空白的瀑布流布局，效果如下：

Aaa|Bbb|Ccc
aaa|Eee|ccc
Ddd|eee|ccc
...

尝试过将数据拆分到不同列容器中，但这种写法繁琐，且难以保持data从上到下的原有顺序，求更简洁的解决方案。

方案1：使用CSS Columns布局（推荐） #

直接通过CSS列布局实现，无需修改数据结构，自动按列填充卡片，完美保持原数据顺序，同时消除空白。

修改容器样式，调整Card组件的适配样式：

// 容器样式
<div style={{
  columns: 4, // 对应原col-lg-3的4列布局
  columnGap: '1.5rem', // 列间距，可按需调整
  padding: '0 1rem'
}}>
  {data.map(datum => <Card key={datum.id} field={datum.field} />)}
</div>

// Card组件调整（移除col-lg-3，避免卡片被列截断）
const Card = ({ field }) => (
  <div style={{
    breakInside: 'avoid', // 保证卡片完整显示在一列中
    marginBottom: '1.5rem',
    padding: '1rem',
    border: '1px solid #eee',
    borderRadius: '4px'
  }}>
    {/* 卡片内容 */}
  </div>
);

说明：breakInside: 'avoid'用于防止卡片被列分割，确保每个卡片的完整性。这种方案无需额外处理数据，代码最简洁。

方案2：JavaScript拆分数据为列数组 #

如果需要保留Bootstrap的row-col结构，可以通过工具函数拆分数据，按列渲染的同时保持原数据顺序：

// 工具函数：将数组拆分为指定列数的二维数组
const splitIntoColumns = (arr, columnCount) => {
  const columns = Array.from({ length: columnCount }, () => []);
  arr.forEach((item, index) => {
    columns[index % columnCount].push(item);
  });
  return columns;
};

// 渲染代码
const columnData = splitIntoColumns(data, 4); // 4列对应col-lg-3

return (
  <div className="row">
    {columnData.map((column, idx) => (
      <div key={idx} className="col-lg-3">
        {column.map(datum => <Card key={datum.id} field={datum.field} />)}
      </div>
    ))}
  </div>
);

说明：通过取余运算，原数据会按顺序分配到不同列中（第1个元素进第1列，第2个进第2列，第5个回到第1列），既保持了数据原有顺序，又复用了Bootstrap的栅格结构。

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