如何计算视口高度网格容器中的最大可容纳项目数量

核心思路 #

要算出容器内可容纳的最优项目数，需分两步计算：先确定每行能放置的项目数量，再算出每列能容纳的行数，两者相乘即为总数量。需注意处理间距的单位转换（rem转px），以及屏幕尺寸变化时的重新计算逻辑。

实现步骤 #

• 单位转换：若使用1.25rem作为间距，需将其转换为像素值（基于根元素字体大小）；若用固定20px则直接使用
• 每行项目数：用网格容器宽度除以「项目宽度+间距」，向下取整避免容器溢出
• 每列行数：用视口高度除以「项目高度+间距」，向下取整
• 总数量 = 每行数量 × 每列行数

完善后的代码 #

export const calcHitsPerPage = () => {
  // 获取DOM元素并做存在性校验
  const productCard = document.querySelector('.ProductCard____0JXki');
  const grid = document.querySelector('.ProductGrid____hZ3pR');
  
  if (!productCard || !grid) return 0;

  // 获取项目与容器的尺寸数据
  const productCardWidth = productCard.offsetWidth;
  const productCardHeight = productCard.offsetHeight;
  const gridWidth = grid.offsetWidth;
  const viewportHeight = window.innerHeight;

  // 处理间距：可切换20px或1.25rem模式
  // 模式1：固定20px间距
  // const gapPx = 20;
  // 模式2：1.25rem转px
  const gapRem = 1.25;
  const gapPx = gapRem * parseFloat(getComputedStyle(document.documentElement).fontSize);

  // 计算每行、每列可容纳的项目数
  const itemsPerRow = Math.floor(gridWidth / (productCardWidth + gapPx));
  const rowsPerPage = Math.floor(viewportHeight / (productCardHeight + gapPx));

  // 计算总数量，确保结果不小于0
  const totalHits = Math.max(itemsPerRow * rowsPerPage, 0);
  
  console.log('可容纳的最优项目数量：', totalHits);
  return totalHits;
};

// 监听窗口尺寸变化，实时更新计算结果
window.addEventListener('resize', calcHitsPerPage);
// 页面加载完成后初始化计算
document.addEventListener('DOMContentLoaded', calcHitsPerPage);

注意事项 #

• 需确保DOM元素加载完成后再执行计算，避免获取不到元素的情况
• 如果网格容器存在左右内边距，需从容器宽度中减去内边距总和后再计算每行项目数
• 若网格的间距仅存在于水平或垂直方向，可单独调整对应方向的计算逻辑

内容的提问来源于stack exchange，提问作者lorem Marston