如何数学判定交替2/3图网格首行张数 避免末行仅剩1张图

核心逻辑：每行交替放2、3张图片时，每连续两行的总容量固定为5（2+3），因此只需要对总图片数做模5运算，即可直接判定首行放置数量，100%避免最后一行剩1张的不合理布局。

判定规则 #

• 总图片数对5取模，结果为1或3时，首行必须放3张
• 其余情况（模5结果为0、2、4），首行放2张
  按这个规则排列后，所有行的图片数只会是2或3，不会出现单张占行的问题。

修正后的7张图片合法布局 #

| -------- |-----|-----|
| 7 photos | ..  | ... |
|          | ... | ..  |
|          | ..  | ..  |
| -------- |-----|-----|

JS实现代码 #

/**
 * 计算交替2/3张网格的首行图片数
 * @param {number} totalImages 总图片数，需≥2
 * @returns {number} 首行应放图片数 2/3
 */
function getFirstRowCount(totalImages) {
  const mod = totalImages % 5;
  return (mod === 1 || mod === 3) ? 3 : 2;
}

// 排列逻辑示例
function generateGrid(totalImages) {
  const rows = [];
  let currentRowCount = getFirstRowCount(totalImages);
  let remaining = totalImages;
  while (remaining > 0) {
    rows.push(currentRowCount);
    remaining -= currentRowCount;
    // 交替切换下一行数量，剩余数量不足时直接取剩余值（按规则剩余值只会是2或3）
    const nextCount = currentRowCount === 2 ? 3 : 2;
    currentRowCount = remaining < nextCount ? remaining : nextCount;
  }
  return rows;
}

直接调用generateGrid传入总图片数，返回的数组就是每行应该放置的图片数量，不会出现单张行的问题。比如传入7会返回[2,3,2]，传入6返回[3,3]，传入11返回[3,2,3,3]，全部符合合法布局要求。

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