卡片瀑布流實現

如何實現下圖瀑布流功能？

思考

瀑布流的核心就是找每一列中最小的高度，給當前列新增資料。

圖片中資料可以簡化成如下格式

const list = [
  {title: '名字1', content: ['a', 'b', 'c', 'd']},
  {title: '名字2', content: ['a', 'b', 'c']}
  {title: '名字3', content: ['a', 'b']}
]

實現

圖中展示資料是四列，所以我們需要初始化一個四列陣列資料。
同時還需要一個陣列保留每列當前的高度，也初始化為0。

const classifyColumns = [[], [], [], []]
const colHeight = [0, 0, 0, 0]

一開始的誤區是想自動獲取渲染後的卡片高度，這時候資料都還沒整理，顯然不合理。

觀察圖片中的樣式可以看出來其實每項高度都是固定的，完全可以計算出來。

list.forEach((item) => {
    // 獲取每列最小高度
    const minColHeight = Math.min(...colHeight)
    // 獲取當前最小高度的列
    const rowIndex = colHeight.indexOf(minColHeight)
    // 將資料push到當前最小列中
    classifyColumns[rowIndex].push(item)
    // 更新當前列的高度
    colHeight[rowIndex] = colHeight[rowIndex] + this.calcWaterfallHeight(item)
  })

// calcWaterfallHeight 根據當前item計算當前卡片高度

最後使用 classifyColumns 渲染資料即可。

最終程式碼

  computed: {
    // 瀑布流資料處理
    classifyColumns () {
      const colHeight = [0, 0, 0, 0]
      const classifyColumns = [[], [], [], []]
      this.list.forEach((item) => {
        const minColHeight = Math.min(...colHeight)
        const rowIndex = colHeight.indexOf(minColHeight)
        classifyColumns[rowIndex].push(item)
        colHeight[rowIndex] = colHeight[rowIndex] + this.calcWaterfallHeight(item)
      })
      return classifyColumns
    }
  },

`