JavaScript实现相册页面图片分组（奇页1图偶页4图）的问题

首先明确需求：奇数页（第1、3、5…页）固定1张图，偶数页（第2、4、6…页）固定4张图，分组结构应为 [1张], [4张], [1张], [4张], ...。

原代码问题分析 #

原逻辑错误地用图片数组的索引奇偶性来判断分组类型，而非当前构建的是奇数页还是偶数页分组，导致条件判断混乱：

• 当判断偶数页分组的条件为 group.length >=4 时，因为索引奇偶性和分组类型不匹配，无法触发分组推送，直接导致逻辑失效；
• 用 >=3 或 >=5 时能“正常工作”只是巧合，实际分组结果不符合需求（比如偶数页可能只凑3张就推送）。

修复后的代码 #

重新设计逻辑，跟踪当前分组需要的图片数量，按需求交替切换分组类型：

let images = [{src: ''}, ...]; // 你的图片数组
let imageGroups = [];
let group = [];
// 当前分组需要的图片数量：初始为1（奇数页）
let currentTarget = 1;

images.forEach(image => {
  group.push(image);
  // 当当前分组达到目标数量时，推送并切换分组类型
  if (group.length === currentTarget) {
    imageGroups.push(group);
    group = [];
    // 切换目标：奇数页（1张）→ 偶数页（4张）→ 奇数页（1张）…
    currentTarget = currentTarget === 1 ? 4 : 1;
  }
});

// 处理剩余未凑够数量的图片（如果有的话）
if (group.length > 0) {
  imageGroups.push(group);
}

代码说明 #

• 用 currentTarget 变量明确当前分组的目标数量，避免索引奇偶性的误导；
• 每完成一个分组就自动切换目标数量，严格遵循“1张→4张→1张→4张”的循环；
• 最后处理剩余图片，避免遗漏。

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