开发循环式内容插入函数：按规则展示帖子、广告与分页

需求梳理 #

需开发函数实现以下循环展示逻辑，最终接入分页：

• 每3篇帖子后插入1则广告
• 接着每4篇帖子后插入1则广告
• 再每8篇帖子后插入1则广告
• 展示1个大横幅
• 重复上述流程

布局参考示例：

Post1   Post2   Image
Post4   Post5   Post6
Image   Post8   Post9
Post10 Post11   Post12
Post13 Post14   Image

Big Image

Post16 Post17   Image
Post19 Post20   Post21
Image   Post23   Post24

分页样式参考：Pagination 1 2 3 4 5 ....

实现思路 #

1. 规则模块化：把「3帖+广告→4帖+广告→8帖+广告→大横幅」定义为一个展示周期，用数组存储规则，方便后续调整
2. 内容预处理：遍历原始帖子列表，按照周期规则插入广告和大横幅，生成完整的展示序列
3. 分页适配：基于预处理后的完整序列，按页码和每页容量截取内容，同时计算总页数

代码实现（JavaScript） #

// 生成模拟帖子数据（实际项目中可替换为接口返回的真实帖子）
function generateMockPosts(totalNum) {
  return Array.from({ length: totalNum }, (_, idx) => `Post${idx + 1}`);
}

// 核心处理函数：生成带广告/横幅的序列并处理分页
function processContent(rawPosts, currentPage = 1, pageSize = 15) {
  // 定义一个周期内的展示规则
  const cycleRules = [
    { takePosts: 3, insertItem: 'Image' },
    { takePosts: 4, insertItem: 'Image' },
    { takePosts: 8, insertItem: 'Image' },
    { takePosts: 0, insertItem: 'Big Image' } // 0表示直接插入横幅，不消耗帖子
  ];

  const fullContent = [];
  let postPointer = 0;
  let rulePointer = 0;

  while (postPointer < rawPosts.length) {
    const currentRule = cycleRules[rulePointer];

    if (currentRule.takePosts > 0) {
      // 取出对应数量的帖子加入序列
      const batchPosts = rawPosts.slice(postPointer, postPointer + currentRule.takePosts);
      fullContent.push(...batchPosts);
      postPointer += currentRule.takePosts;
      // 插入广告
      fullContent.push(currentRule.insertItem);
      rulePointer++;
    } else {
      // 插入大横幅，然后重置规则指针开始新周期
      fullContent.push(currentRule.insertItem);
      rulePointer = 0;
    }

    // 规则走完一轮后重置指针
    if (rulePointer >= cycleRules.length) {
      rulePointer = 0;
    }
  }

  // 计算分页参数
  const startIdx = (currentPage - 1) * pageSize;
  const endIdx = startIdx + pageSize;
  const currentPageContent = fullContent.slice(startIdx, endIdx);
  const totalPages = Math.ceil(fullContent.length / pageSize);

  return {
    currentPageContent,
    totalPages,
    currentPage
  };
}

// 使用示例
const allPosts = generateMockPosts(50);
const result = processContent(allPosts, 1);

// 输出当前页内容
console.log("当前页展示内容：");
result.currentPageContent.forEach(item => console.log(item));
// 输出分页导航
console.log(`分页：Pagination ${Array.from({ length: result.totalPages }, (_, i) => i + 1).join(' ')}`);

关键说明 #

• 规则数组cycleRules可灵活修改，比如调整帖子数量、替换广告类型，无需改动核心循环逻辑
• 分页逻辑基于预处理后的完整序列实现，确保广告和帖子的相对位置不会被分页打乱
• 可根据前端框架（React/Vue等）适配渲染逻辑，把currentPageContent映射为对应的DOM元素

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