如何计算父div可容纳的子div数量 实现溢出内容分页展示

方案1：整元素分页（单个元素不拆分，溢出则整个元素放到下一页） #

该方案实现成本最低，可满足大多数场景需求。

核心逻辑 #

• 预先设置父容器的固定宽高，overflow: hidden
• 逐个将子元素插入父容器，每次插入后判断父容器scrollHeight是否大于clientHeight，如果超出则回滚最后一次插入，将该元素划入下一页的元素组
• 维护当前页码状态，点击切换按钮时渲染对应页的元素组

代码示例 #

// 假设父容器DOM为parentEl，API返回的HTML字符串为apiResHtml
const PAGE_PADDING = 0; // 如果父容器有内边距需要对应调整该值
const pageGroups = [];
let currentPage = 0;

// 1. 把HTML字符串转成DOM节点数组
const parser = new DOMParser();
const tempDoc = parser.parseFromString(apiResHtml, 'text/html');
const allChildren = Array.from(tempDoc.body.children);

// 2. 拆分分页元素组
let currentGroup = [];
parentEl.innerHTML = '';
for (let el of allChildren) {
  parentEl.appendChild(el);
  // 判断是否溢出
  if (parentEl.scrollHeight > parentEl.clientHeight - PAGE_PADDING) {
    // 溢出则移出当前元素
    parentEl.removeChild(el);
    // 保存当前组
    pageGroups.push([...currentGroup]);
    // 重置当前组，加入当前溢出元素
    currentGroup = [el];
    // 清空父容器重新添加
    parentEl.innerHTML = '';
    parentEl.appendChild(el);
  } else {
    currentGroup.push(el);
  }
}
// 最后一组加入分组数组
if (currentGroup.length) pageGroups.push(currentGroup);

// 3. 分页切换逻辑
function renderPage(pageIndex) {
  parentEl.innerHTML = '';
  pageGroups[pageIndex].forEach(el => parentEl.appendChild(el));
  currentPage = pageIndex;
}
// 下一页按钮点击事件
nextBtn.addEventListener('click', () => {
  if (currentPage < pageGroups.length - 1) renderPage(currentPage + 1);
});
// 上一页按钮点击事件
prevBtn.addEventListener('click', () => {
  if (currentPage > 0) renderPage(currentPage - 1);
});

// 初始化渲染第一页
renderPage(0);

方案2：支持单个元素内容拆分分页 #

如果要实现单个元素溢出部分拆分到下一页，可以用CSS多列布局实现，无需复杂的JS计算：

核心逻辑 #

• 父容器设置column-width为自身宽度，column-gap: 0，height为单页高度，overflow-x: auto，让内容自动按父容器尺寸拆分到多列
• 隐藏滚动条，点击切换按钮时修改滚动的scrollLeft值为单页宽度，实现分页切换效果

代码示例 #

.parent {
  width: 600px; /* 单页宽度，按需调整 */
  height: 800px; /* 单页高度，按需调整 */
  column-width: 600px; /* 和单页宽度保持一致 */
  column-gap: 0;
  overflow-x: hidden; /* 隐藏横向滚动条 */
  overflow-y: hidden;
}
.parent > * {
  break-inside: auto; /* 允许元素内部分页，设置为avoid则禁止拆分元素 */
}

const pageWidth = parentEl.clientWidth;
let currentPage = 0;
const totalPage = Math.ceil(parentEl.scrollWidth / pageWidth);

// 切换页逻辑
function switchPage(pageIndex) {
  parentEl.scrollLeft = pageIndex * pageWidth;
  currentPage = pageIndex;
}

注意事项 #

• 如果子元素包含图片、字体等异步加载资源，需要等资源加载完成后再执行分页计算，避免尺寸计算错误
• 窗口尺寸变化时可以监听resize事件，重新生成分页组保证展示正确
• 如果需要保留子元素的事件监听，直接操作DOM节点即可，不要转成HTML字符串拼接

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