Javascript 创建一个垂直的时间轴，就像开发人员故事一样

我目前正在尝试制作一个垂直的时间线（就像stackoverflow开发者的故事一样）

要求如下：

• 时间线不应只是左右改变项目，也不应在相反的一侧留下空间（或）
• 如果需要，左侧和右侧项目应填满剩余的空间（不幸的是，一旦项目内容变长，项目的顺序将无法保持）
• 项目的顺序应该与所提供的DOM结构中的顺序相同，因此在时间线中，首先出现的项目应该是第一个

---

因此，在第一步中，我只想测试如何将项目相应地向左或向右对齐

这就是我目前拥有的：

。时间线{
宽度：100%；
}
.时间表项目{
框大小：边框框；
宽度：50%；
位置：相对位置；
浮动：左；
清除：左；
左侧填充：20px；
保证金：1px 0 1px；
背景：番茄；
}
.timeline-item.inverse{
浮动：对；
清楚:对,；
背景：灰色；
}
/*仅用于显示中点对齐*/
.时间线项目：：之后{
内容：''；
高度：2倍；
宽度：10px；
背景：DarkGrey；
位置：绝对位置；
最高：50%；
右：0；
}
.timeline项。反向：：之后{
左：0；
背景：黑暗；
}

1这是一些示例文本（多行）

这是一些示例文本

这是一些示例文本

这是一些示例文本

这是一些示例文本

这是一些示例文本

这是一些示例文本

这是一些示例文本

这是一些示例文本


这是一些示例文本


这是一些示例文本


这是一些示例文本

目前，使用普通CSS无法实现这一点。但是，可以使用JavaScript完成此操作。
请随意跳到底部进行演示，或继续阅读以获得详细解释

方法。我提出的解决方案如下。
•时间线上的事件绝对位于时间线容器内。
•JavaScript确定事件在时间线上的位置，并最终确定时间线容器的高度。这是使用内联样式和一个类设置的，该类指示事件是在时间线的左侧还是右侧。例如，该类可用于添加箭头。
•CSS决定事件的大小和外观以及时间线

要求。问题陈述了以下要求。
R1。时间线不应只是左右改变事件。
R2。如果需要，左右事件应填满剩余空间。
R3。项目的顺序应与提供的DOM结构中的顺序相同

定位算法。事件沿时间线从上到下定位，顺序为它们在DOM（R3）中出现的顺序。该算法跟踪每侧最后一个事件的底部，例如BL和BR。事件的位置越低，这些数字就越高，因为它们记录了与时间线顶部的偏移量

假设我们想要定位事件E。我们选择将其定位在底部最小的一侧。因此，它由min（BL，BR）决定。这是在演示中的函数min中实现的。然后，我们将E放置在尽可能靠近时间线顶部的位置，同时使其仍然处于有效位置。一个有效的位置是这样的，即没有其他事件重叠，并且事件的中心（它附加到时间线上的点）必须位于时间线上的上一点之后。设E'为放置E的另一侧的最后一个事件。设P为与E在同一侧的最后一个事件

测试三个位置就足够了，即以下位置。
1.将E的顶部与E'的底部对齐。这始终是一个有效的位置，但对R2来说不是很好。
2.将E的中心尽可能靠近E'的中心对齐。这对R2更好，但当E的顶部与P重叠时（E的顶部小于P的底部），这不是一个有效的位置。
3.将E的顶部尽可能靠近P的底部对齐。这是R2的最佳位置，但当E的中心位于E'的中心之前时，这不是一个有效的位置

该算法只需按给定顺序测试这些位置，并在当前测试位置有效时覆盖E的位置。这样，将选择最佳有效位置

样式、细节和备注。我添加了一些CSS标记来说明如何处理时间线。这个标记和JavaScript代码应该是相当跨浏览器兼容的。我没有使用ES6功能来最大限度地提高兼容性，除了，它仍然有很好的支持，如果需要的话，还可以在链接页面上为InternetExplorer添加polyfill。代码由我自己在最新版本的Firefox和Chrome中进行测试

代码没有针对性能进行优化，但由于算法在线性时间内运行，因此即使时间线中有许多事件，运行该算法也不会出现问题。演示程序会重新计算每个站点上的布局，您可能希望在实时应用程序中限制布局

在下面的演示中，您将看到一个参数

minSpace

。这是时间线上两个连续点之间以及时间线上同一侧两个事件之间的空间（以像素为单位）。演示使用此参数的默认值10

演示。我创建了一个。如果愿意，您也可以在此处将其作为代码段运行。我建议您调整预览窗口的大小，以便查看时间线布局是如何更新的

//使用匿名函数包装以避免污染全局命名空间
（功能（）{
//查找数组中的最小元素，以及