JavaScript 网格列宽适配计算求助：需尽可能接近目标尺寸

核心逻辑 #

我们要得到的列宽需要满足两个要求：

• 所有列宽度相等，总宽度刚好等于给定的网格总宽度
• 最终列宽尽可能接近传入的目标尺寸

实现思路：

• 列数必须是正整数，首先通过目标尺寸估算出最接近的整数列数
• 用网格总宽度除以整数列数，得到最终的列宽

实现代码 #

function calculateSize(gridWidth, targetSize){
  // 目标尺寸大于网格总宽度，直接返回网格总宽度
  if(targetSize > gridWidth){
    return gridWidth;
  }
  // 估算最接近的整数列数
  const columnCount = Math.round(gridWidth / targetSize);
  // 避免列数为0的极端情况
  const safeColumnCount = Math.max(1, columnCount);
  // 计算最终列宽
  const newSize = gridWidth / safeColumnCount;
  return newSize;
}

效果验证 #

对应你给出的示例，计算结果完全匹配：

• gridWidth=10, targetSize=9：估算列数为Math.round(10/9)=1，最终列宽10/1=10
• gridWidth=100, targetSize=51：估算列数为Math.round(100/51)=2，最终列宽100/2=50
• gridWidth=20, targetSize=6：估算列数为Math.round(20/6)=3，最终列宽20/3≈6.66667

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