使用Flex和简单js实现瀑布流布局

Demo地址

使用Flex实现瀑布流需要根据所要展示的列数将数据源进行处理。外层盒子使用水平方向布局，外层盒子的子元素的个数由具体几列决定，子元素使用column垂直方向布局，需要判断每一列的高度，将新的元素塞入高度最低的那一列。

// 以react代码为示例
const columnCount = 4; // 一共要展示几列
const data = []; // 待处理的数据源
const allColumnData = []; // 最后要循环展示的数据
// 生成一个长度为columnCount的二维数组，一维的数据为每一列的所有数据，二维的数据展示当前列要展示的每一项数据。后续的每一个数据插入到四列中高度最小的列
new Array(columnCount).fill(1).forEach((item, index) => {
  // 插入每一列的第一个元素
  allColumnData[index] = data[index] ? [data[index]] : [];
});
data.slice(columnCount).forEach(item => {
  // 计算每一列的高度, computeColumnHeight方法用于计算当前列的高度，根据数据对应生成的dom结构可以进行计算
  const columnHeightMap = allColumnData.map(column => this.computeColumnHeight(column));
  const minHeight = Math.min.apply(null,columnHeightMap);
  // 获取高度最低的那一列的index的值并将新的数据插入到最低的那一列中
  const minIndex = columnHeightMap.indexOf(minHeight);
  allColumnData[minIndex].push(item);
});


.flex-row {
  display: flex;
  flex-direction: row;
}
.flex-column {
  width: 25%; // 对应列数即可
  display: flex;
  flex-direction: column;   
}
render () {
  return (
    <div className="flex-row">
      {allColumnData.map(item => (
        <div className="flex-column">
          {item.map(item1 => (
            <div>{item1}</div>
          ))}
        </div>
      ))}
    </div>
  )
}