傳統實現方式

當前文章的gif文件較大，加載的時長可能較久

這裏我拿小紅書的首頁作為分析演示

可以看到他們的實現方式是傳統做法，把每個元素通過獲取尺寸，然後算出left、top的排版位置，最後在每個元素上設置偏移值，思路沒什麼好説的，就是算元素座標。那麼這種做法有什麼缺點？請看下面這張圖的操作

容器尺寸每發生一次變化，容器內部所有節點都需要更新一次樣式設置，當頁面元素過多時，窗口的尺寸變動卡到不得了；
實現起來過於複雜，需要對每個元素獲取尺寸然後進行計算，不利於後面修改佈局樣式；
每一次的容器尺寸發生變動，圖片元素都會閃爍一下（電腦好的可能不會）；

最佳實現方式

吐槽：早在2019年我就將下面的這種實現方式應用在小程序項目上了，但是目前還沒見到有人會用這種方式去實現，為什麼會沒有人想到呢？表示不理解。

代碼倉庫
預覽地址
備用預覽地址

先看一下效果

在上面的預覽地址中，打開控制枱查看節點元素，可以看到是沒有任何的js控制樣式操作，而是全部交給css的自適應來渲染，我在代碼層中只需要把數據排列好就行。

實現思路

這裏我將把容器裏面分為4列，如下圖

然後再在每列的數組裏面按順序添加數據即可，這樣去佈局的好處既方便、兼容性好、瀏覽器渲染性能開銷最低化，而且還不會破壞文檔流，將操作做到極致簡單。剩下的只需要怎樣去處理每一列的數組即可。

處理數組邏輯

由於是要做成動態列，所以不能固定4個數組列表，那就做成動態對容器輸出N列，最後再對每一列添加數據即可。這裏我用ResizeObserver去代替window.onresize，理由是在實際應用中，容器會受到其他佈局而影響，而非窗口變動，所以前者更精確一些，不過思路做法都是一樣的。

設置一個變量column，代表顯示頁面有多少列；
聲明一個變量cacheList，用來緩存接口請求回來的數據，也就是總數據；
然後監聽容器的寬度去設置column的數量值；
最後用computed根據column的值生成一個二維數組進行頁面渲染即可；

import { ref, reactive, computed, onMounted, onUnmounted } from "vue";

/** 每一個節點item的數據結構 */
interface ItemInfo {
  id: number
  title: string
  text: string
  /** 圖片路徑 */
  photo: string
}

type ItemList = Array<ItemInfo>;

const page = reactive({
  /** 頁面中出現多少列數據 */
  column: 4,
  update: 0,
});

const pageList = computed(function() {
  const result = new Array(page.column).fill(0).map((_, index) => ({ id: index, list: [] as ItemList }));
  let columnIndex = 0;
  page.update; // TODO: 這裏放一個引用值，用於手動更新；
  for (let i = 0; i < cacheList.length; i++) {
    const item = cacheList[i];
    result[columnIndex].list.push(item);
    columnIndex++;
    if (columnIndex >= page.column) {
      columnIndex = 0;
    }
  }
  console.log("重新計算列表 !!----------!!");
  return result;
});

let cacheList: ItemList = [];

async function getData() {
  page.loading = true;
  const res = await getList(20); // 接口請求方法
  page.loading = false;
  if (res.code === 1) {
    cacheList = cacheList.concat(res.data);
    // TODO: 手動更新，這裏不把`cacheList`放進`page`裏面是因為響應數據列表過多會影響性能
    page.update++;
  }
}

let observer: ResizeObserver;

onMounted(function() {
  getData()
  observer = new ResizeObserver(function(entries) {
    const rect = entries[0].contentRect;
    if (rect.width > 1200) {
      page.column = 4;
    } else if (rect.width > 900) {
      page.column = 3;
    } else if (rect.width > 600) {
      page.column = 2;
    }
  });
  observer.observe(document.querySelector(".water-list")!);
});

onUnmounted(function() {
  observer.disconnect();
})

這裏有個細節，我把page.update丟進computed中作為手動觸發更新的開關而不是把cacheList聲明響應式的原因是因為頁面只需要用到一個響應數組，如果把cacheList也設置為響應式，那就導致了數組過長時，響應式過多的性能開銷，所以這裏用一個引用值作為手動觸發更新依賴的方式會更加好。

這樣一個基本的瀑布流就完成了。

更完美的處理

細心的同學這時已經發現問題了，就是當某一列的圖片高度都很長時，會產生較大的空隙，因為是沒有任何的高度計算處理而是按照數組順序的逐個添加導致，像下面這樣。

所以這裏就還需要優化一下邏輯

在獲取數據時，把每一個圖片的高度記錄下來並寫入到總列表中
在組裝數據時，先拿到高度最低的一列，然後將數據加入到這一列中

/**
 * 加載所有圖片並設置對應的寬高
 * @param list
 */
async function setImageSize(list: ItemList): Promise<ItemList> {
  const total = list.length;
  let count = 0;
  return new Promise(function(resolve) {
    function loadImage(item: ItemInfo) {
      const img = new Image();
      img.src = item.photo;
      function complete<T extends { width: number, height: number }>(target: T) {
        count++;
        item.width = img.width;
        item.height = img.height;
        if (count >= total) {
          resolve(list);
        }
      }
      img.onload = () => complete(img);
      img.onerror = function() {
        item.photo = defaultPic.data;
        complete(defaultPic);
      };
    }
    for (let i = 0; i < total; i++) {
      loadImage(list[i]);
    }
  });
}

async function getData() {
  page.loading = true;
  const res = await getList(20);
  // page.loading = false;
  if (res.code === 1) {
    const list = await setImageSize(res.data);
    page.loading = false;
    cacheList = cacheList.concat(list);
    // TODO: 手動更新，這裏不把`cacheList`放進`page`裏面是因為響應數據列表過多會影響性能
    page.update++;
  }
}

const pageList = computed(function() {
  const result = new Array(page.column).fill(0).map((_, index) => ({ id: index, list: [] as ItemList, height: 0 }));
  /** 設置列的索引 */
  let columnIndex = 0;
  // TODO: 這裏放一個引用值，用於手動更新；
  page.update;
  // 開始組裝數據
  for (let i = 0; i < cacheList.length; i++) {
    const item = cacheList[i];
    if (columnIndex < 0) {
      // 從這裏開始，將以最低高度列的數組進行添加數據，這樣就不會出現某一列高度與其他差距較大的情況
      result.sort((a, b) => a.height - b.height);
      // console.log("數據添加前 >>", item.id, result.map(ele => ({ index: ele.id, height: ele.height })));
      result[0].list.push(item);
      result[0].height += item.height!;
      // console.log("數據添加後 >>", item.id, result.map(ele => ({ index: ele.id, height: ele.height })));
      // console.log("--------------------");
    } else {
      result[columnIndex].list.push(item);
      result[columnIndex].height += item.height!;
      columnIndex++;
      if (columnIndex >= page.column) {
        columnIndex = -1;
      }
    }
  }
  console.log("重新計算列表 !!----------!!");
  // 最後排一下原來的順序再返回即可
  result.sort((a, b) => a.id - b.id);
  // console.log("處理過的數據列表 >>", result);
  return result;
});

這樣就達到完美的效果了，但是每次獲取數據的時候卻要等一會，因為要把獲取回來的圖片全部加載完才進行數據顯示，所以沒有基礎版的無腦組裝數據然後渲染快。除非然讓後端返回數據的時候也帶上圖片的寬高（不現實），只能在上傳圖片的操作中攜帶上。

終極版

有沒有一種幾不需要組裝數據，也不需要獲取圖片尺寸的方法？當然有，答案就是用css中的grid佈局!

在列表容器中

.waterfall-box {
  --column: 4;
  display: grid;
  grid-template-columns: repeat(var(--cloumn), 1fr);
  align-items: end;
  grid-gap: 0 20px;
  padding: 20px 0;
}

看到--cloumn應該猜到是什麼回事了吧，保持上面ResizeObserver監聽列的操作不變，將.waterfall-box動態設置變量即可，最後再處理一下每個 item 中的 grid-row-end屬性即可

       <template>
  <div class="waterfall-item" v-for="(item, index) in page.list" :key="item.id">
    <img class="pic" :src="item.photo" alt="" :ref="e => setItemStyle(e as any, index)">
    <div class="title">{{ item.title }}</div>
    <div class="content ellipsis_2">{{ item.text }}</div>
  </div>
</template>
<script setup lang="ts">
// ...省略重複代碼

function setItemStyle(img: HTMLImageElement, index: number) {
  // console.log(index, img);
  if (!img) return;
  function update() {
    const item = img.parentElement;
    if (!item) return;
    const gapRows = index >= page.column ? (page.column * 2) : 0;
    const rows = Math.ceil(item.clientHeight / 2) + gapRows;
    item.style.gridRowEnd = `span ${rows}`;
  }
  update();
  img.onload = update;
  img.onerror = function() {
    img.src = defaultPic.data;
    update();
  };
}
</script>
      

這樣就將所有操作都變成自適應的了，無需關心數據和圖片尺寸，也不用分成多個列的節點佈局。