網頁批注如何實現Y軸位置的自適應布局？

網頁批注y軸位置自適應算法詳解

本文探討如何構建類似word文檔的網頁批注功能，重點解決批注重疊問題，實現批注Y軸位置的自適應布局。 理想狀態下，批注應緊密排列，避免重疊，同時保持批注間合理的間距。

核心挑戰在于設計一個算法，在添加新批注時自動計算其Y軸位置。 一個有效的方案是利用絕對定位，并結合數據結構和算法來管理批注位置。

數據結構:

我們使用數組存儲每個批注的信息，每個元素包含top（初始頂部位置）和height（高度）屬性。例如：

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

自適應算法:

我們采用類似瀑布流布局的算法，利用reduce方法迭代處理數組，計算每個批注最終的Y軸位置(currentTop)。 算法的核心在于比較當前批注的初始top值和前一個批注的底部位置，選擇較大的值作為當前批注的最終currentTop，從而避免重疊。

const 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);

Math.max(n.top, (s.currentTop || s.top) + s.height) 這一行代碼是算法的核心。 s.currentTop || s.top 處理了第一個批注的情況。

應用:

通過該算法計算出的currentTop值，可以應用于批注元素的css樣式，例如 top: ${currentTop}px;，從而實現批注的自適應布局，有效解決批注重疊問題，并達到類似Word文檔批注間距的效果。 該算法確保批注緊密排列，同時避免相互遮擋，實現流暢的網頁批注體驗。