const calcDisplay = () => {
  // 實際顯示的高度=可視視窗高度 + 滾動距離 - 上方 navbar 高度
  const height = window.innerHeight + window.scrollY - 152;

  // 252 為卡片的高度
  const num = Math.floor(height / 252);

  // 目前可實際顯示卡片的數量 = 一行容納數量 * 一列容納數量
  const total = size.value * num;

  if (displayData.value.length === data.value.length) return;

  for (let j = displayData.value.length; j < total; j += 1) {
    const item = data.value[j];
    displayData.value.push(item);
  }
};
// 使用 setTimeout 進行節流 ，避免使用者短時間一直觸發消耗效能
const debounce = (func, delay) => {
  let timer;
  return () => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func();
    }, delay);
  };
};
onMounted(() => {
  addEventListener("scroll", debounce(calcDisplay, 250));
});

# install deps
npm install

# run dev server
npm run dev

# run build
npm run build