问一个网页定位的问题？

Question

问题背景：我现在在做一个类似word一样的批注功能。

word的批注功能界面如上。我现在想实现像它一样的批注间距的效果。
它的批注的间距其实应该是分成两种格式：
1.批注间隔远的，就近原则显示
比如最上面的批注1区域，和下面的批注距离很远，它就把批注定位在离批注文字很近的位置。
2.批注紧挨着的，就自适应紧挨在一起，不会相互重叠
比如图片中下面的三条批注。

我现在想得到的就是，当用户增加批注时，就直接定位批注的Y轴位置，然后在批注区域创建，但是创建前需要做自适应，不然可能会出现批注重叠的情况，这个自适应没思路怎么做

Answer 1

如果是我做，这个需求用 absolute 做。然后统计 top，height 自顶向下，做最大值

这样我们就可以把问题变成一个计算问题。然后就是做算法优化了

---

补一下数据结构

[
    {top: 100, height: 200},
    {top: 800, height: 200},
    {top: 820, height: 200},
    {top: 1020, height: 200},
]

---

计算出来就和瀑布流差不多，只不过多了一个 Math.max 而已

arr = [
    {top: 100, height: 200},
    {top: 800, height: 200},
    {top: 820, height: 200},
    {top: 1020, height: 200},
    {top: 1430, height: 180},
]
arr.reduce((s, n, i) => {
    n.currentTop = Math.max(n.top, (s.currentTop || s.top) + s.height)
    return n
})
console.log(arr)