實現瀑布流布局，就這幾行代碼？

大家好，我是Echa 哥，瀑布流布局我記得前年有跟大家介紹用純CSS方案實現過，不知道粉絲們還記得嗎？ 不記得沒關係，請見

前言

瀑布流布局是一種比較流行的頁面布局方式，表現為參差不齊的多欄卡片。跟網格布局相比，顯得更靈動，更具藝術氣息。

實現瀑布流布局的方式有多種，比如multi-column布局，grid布局，flex 布局等。但是這些實現方式都有各自的局限性，代碼也略複雜。

其實，有個最原始、最簡單，也是兼容性最好的實現方式，那就是使用絕對定位。瀑布流布局的元素是一些等寬不等高的卡片，只要根據元素的實際寬高計算出自己的坐標位置就行了。

要計算坐標自然要用到 JavaScript，這就不是純 CSS 方案，對某些前端來講顯得不那麼純粹。不過只要理清思路了，也用不了幾行代碼。本文就給出最近實現的一個版本。

// 計算每個卡片的坐標
export function calcPositions({ columns = 2, gap = 7, elements }) {
  if (!elements || !elements.length) {
    return [];
  }
  const y = []; //上一行卡片的底部縱坐標數組，用於找到新卡片填充位置
  const positions = []; // 每個卡片的坐標數組
  elements.forEach((item, index) => {
    if (y.length < columns) { // 還未填滿一行
      y.push(item.offsetHeight);
      positions.push({
        left: (index % columns) * (item.offsetWidth + gap),
        top: 0
      });
    } else {
      const min = Math.min(...y); // 最小縱坐標
      const idx = y.indexOf(min); // 縱坐標最小的卡片索引
      y.splice(idx, 1, min + gap + item.offsetHeight); // 替換成新卡片的縱坐標
      positions.push({
        left: idx * (item.offsetWidth + gap),
        top: min + gap
      });
    }
  });
// 由於採用絕對定位，容器是無法自動撐開的。因此需要計算實際高度，即最後一個卡片的top加上自身高度
  return { positions, containerHeight: positions[positions.length - 1].top + elements[elements.length - 1].offsetHeight };
}

上面這段代碼的作用就是計算每個卡片的left、top，以及容器的總高度。關鍵位置都有注釋，應該不難理解。

有了這幾行核心代碼，要想封裝成瀑布流組件就很容易了。以 Vue 為例，可以這樣封裝：
MasonryLite.vue

<template>
  <div class="masonry-lite">
    <slot></slot>
  </div>
</template>
<script>
import { calcPositions } from './index.js';
export default {
  name: 'MasonryLite',
  props: {
    gap: {
      type: Number,
      default: 12,
    },
    columns: {
      type: Number,
      default: 2,
    },
  },
  data() {
    return {};
  },
  mounted() {
    this.doLayout();
  },
  methods: {
    doLayout() {
      const children = [...this.$el.querySelectorAll('.masonry-item')];
      if (children.length === 0) {
        return;
      }
      const { positions, containerHeight } = calcPositions({
        elements: children,
        columns: this.columns,
        gap: this.gap,
      });
      children.forEach((item, index) => {
        item.style.cssText = `left:${positions[index].left}px;top:${positions[index].top}px;`;
      });
      this.$el.style.height = `${containerHeight}px`;
    },
  },
};
</script>
<style lang="scss" scoped>
.masonry-lite{
  position: relative;
}
.masonry-item {
  position: absolute;
}
</style>

使用組件：

<MasonryLite>
  <div class="product-card masonry-item" v-v-for="(item, index) in items" :key="index">
    <img :src="item.imageUrl" />
    <header>{{ item.title }}</header>
  </div>
</MasonryLite>

不過這樣其實還會有點問題，就是doLayout的執行時機。因為該方案基於絕對定位，需要元素在渲染完成後才能獲取到實際寬高。如果卡片內有延遲加載的圖片或者其他動態內容，高度會發生變化。這種情況下就需要在DOM更新後主動調用一次doLayout重新計算布局。

如果大家有更好的實現方案，歡迎交流！

代碼倉庫：https://github.com/kaysonli/masonry-lite

npm 包：masonry-lite

如果覺得對你有幫助，幫忙點個不要錢的star。