如何用JavaScript识别HTML垂直空白并判定绝对定位div所属行

首先明确你的判定规则本质是：垂直方向存在重叠的盒子属于同一行，两个盒子组之间的垂直空白就是行的分隔线，基于这个逻辑可以按以下步骤实现：

• 第一步：提取所有盒子的垂直边界信息
• 第二步：按盒子的顶部偏移量从上到下排序
• 第三步：遍历排序后的盒子，合并垂直区间有重叠的盒子为同一行，碰到垂直空白就新增行

function groupBoxesByRow() {
  const boxes = Array.from(document.querySelectorAll('.box'));
  // 计算每个盒子相对于父容器的垂直上下边界
  const boxBounds = boxes.map(box => {
    const top = box.offsetTop;
    const bottom = top + box.offsetHeight;
    return { element: box, top, bottom };
  });
  // 按盒子顶部位置从小到大排序
  boxBounds.sort((a, b) => a.top - b.top);
  if (!boxBounds.length) return [];

  const rows = [];
  let currentRow = [boxBounds[0]];
  let currentRowMaxBottom = boxBounds[0].bottom;

  for (let i = 1; i < boxBounds.length; i++) {
    const currBox = boxBounds[i];
    // 当前盒子顶部小于当前行的最大底部，说明和当前行有重叠，归入当前行
    if (currBox.top < currentRowMaxBottom) {
      currentRow.push(currBox);
      // 更新当前行的最大底部数值
      currentRowMaxBottom = Math.max(currentRowMaxBottom, currBox.bottom);
    } else {
      // 出现垂直空白，新增一行
      rows.push(currentRow);
      currentRow = [currBox];
      currentRowMaxBottom = currBox.bottom;
    }
  }
  // 把最后一行加入结果集
  rows.push(currentRow);

  // 可选：给每个盒子新增自定义属性标记所属行号，方便后续业务调用
  rows.forEach((row, rowIndex) => {
    row.forEach(item => {
      item.element.dataset.rowNumber = rowIndex + 1;
    })
  });
  return rows;
}

// 调用即可得到所有行的分组结果
const rowGroups = groupBoxesByRow();

针对你给出的示例代码，运行后分组结果如下：

• 第1行：box1、box2
• 第2行：box4
• 第3行：box5
• 第4行：box3

该逻辑适配任意数量的absolute盒子，不需要提前预设任何固定参数，只要盒子是在同一个relative定位的父容器下就能正常运行。

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