网页定位中的批注间距实现
在进行类似 Word 的批注功能开发时，需要针对批注间距的效果进行实现。本文将介绍如何根据批注的位置关系，合理定位批注 Y 轴位置。
问题背景：
以 Word 的批注界面为例，它的批注间距可以分为两种格式：
- 批注间隔远的，就近原则显示：如果批注与其他批注距离较远，则会定位在距离批注文字很近的位置。
- 批注紧挨在一起的，就自适应紧挨在一起，不会相互重叠：如果批注紧挨在一起，则会自适应排列，避免彼此重叠。
解决方案：
采用 Absolute 定位的方式进行批注定位，同时统计 Y 轴位置和批注高度，记录自顶向下计算的每个批注位置。这样，就可以将问题转化为一个计算最大值的问题。
补齐数据结构后，可以应用算法优化进行计算。使用 reduce 函数，迭代遍历批注数据，计算当前批注的 Y 轴位置。如果当前位置与前一个位置冲突，则取最大值作为当前位置，确保批注不会重叠。
代码示例：
const arr = [
{ top: 100, height: 200 },
{ top: 800, height: 200 },
{ top: 820, height: 200 },
{ top: 1020, height: 200 },
{ top: 1430, height: 180 },
];
const result = arr.reduce((s, n, i) => {
n.currentTop = Math.max(n.top, (s.currentTop || s.top) + s.height);
return n;
});
// 计算后的结果
console.log(result);通过这种方式，可以实现自适应的批注间距效果，避免批注重叠，从而达到类似 Word 批注功能的定位效果。
