Javascript 如何在不重叠的情况下分散div

我正在构建一个事件调度器，我已经陷入了一个无法找到一种方法来传播事件，而不相互重叠。（它可能同时有事件且没有限制。只要有可能，请使用100%的可用

宽度

）

这里是这个场景的图片。

一些注意事项：

• 事件被包装在一个div中，其中包含

  位置：relative

  ，所有事件都包含

  位置：absolute

• 使用javascript，我必须计算每个动态“div事件”的

  top

  left

  width

  和

  height

  的值

• 事件是一组对象，如下面的代码：
  { 开始：“12:00:30”， (完):"13:00:00"， 描述：“evt1”， id:'00001' }

• 我正在使用Vue.js开发这个项目。但如果您不了解Vue，这不是问题。我已经使用jsbin构建了一个小项目，这样您就可以随意使用javascript函数了

实时代码：

我哪里有问题？

我找不到基于一系列事件动态计算

顶部

左侧

宽度

和

高度

的算法

关于jsbin代码的一些注意事项：

• 查找上述4个属性的所有代码都在函数

  parsedEvents

• 在

  parsedEvents

  内部，您可以使用以下命令访问事件数组：

  this.events

• parsedEvents

  的任务是循环遍历事件数组，并将样式属性添加到每个事件中，然后使用样式对象返回一个新的事件数组
• 每30分钟的高度为40px

---

有什么想法可以实现这一目标或找到更好的解决方案吗？

正在对此进行更多思考。我涵盖了宽度、高度和顶部。但是您可能在计算

左侧时遇到问题。所以一个小小的改变。。。为每30分钟增量创建计数器的目标仍然存在，但不要循环增量和筛选项，反之亦然。循环遍历项目并从那里填充计数器对象。它也会更快。在该循环中，不仅要将counter存储到counter对象，还要将itemID推送到同一对象的另一个属性（以及相同的增量）。因此，每个增量可以表示为{span:“17:00”，计数器：2，项：[135148]}。此
项目
数组稍后将帮助您确定每个项目的
左侧
位置，并避免水平重叠。因为
items
数组中项目在项目所有增量上的最大位置=项目在日历上从左到右的位置。用宽度（-1）乘以它，你就剩下了
在经历了一段时间的挑战后，我认为是时候放弃这个想法了。可以编写许多安排活动的可能场景，但当你深入挖掘时，你会意识到甚至很难写出你想要做的事情，即使你成功了，你的一些决定在屏幕上也不好看。这仅适用于在宽度上扩展事件。定位，甚至重新定位，以填补空白是解决问题，而不是太难

代码段在这里（或者JSBin，如果您愿意：）

绿色事件被检测为“可扩展”。灰色的物体不能膨胀。为了澄清扩展逻辑的问题，请举例说明：


evt 1和evt3？可以是这样，或者evt3正常运行，它们都会扩展
evt7和evt12？扩展此功能的许多方法。。。如何定义规则
想象一下evt7和evt11 ar合并成一个大事件。如何扩展evt10、evt7/11和evt 12？
... 现在，尝试编写规则，以一致地回答上述3个问题（以及本例中没有的更多可能的情况）

我的结论是，编写规则和发展规则是不值得的。用户界面的可用性不会得到太多。在某些场景中，它们甚至会变得松散，例如，某些事件在视觉上会更大，只是因为它们有空间，而不是因为它们更重要

我建议布局与示例中的布局相似或完全相同。事件不会扩大。我不知道你们期望每天发生多少事件，现实生活中的场景是什么，但我唯一可能做的升级是将日历垂直分割成不同的区域——时间点不与任何事件重叠，就像示例中evt7和evt11之间的线。然后在每个区域独立运行相同的脚本。这将重新计算每个区域的垂直插槽，因此具有evt10 i evt11的区域将只有2个垂直插槽，每个插槽将填充50%的空间。如果你的日历上只有几个拥挤的小时，而且只有几个晚/早的事件，那么这可能是值得的。这将解决当天晚些时候发生的事件过于狭隘的问题，而不会花费太多时间。但是如果一天中发生的事情都是重复的，我认为这是不值得的


let事件=[
{startAt:“00:00”，endsAt:“01:00”，描述：“evt1”，id:'00001'}，
{startAt:“01:30”，endsAt:“08:00”，描述：“evt2”，id:'00002'}，
{startAt:“01:30”，endsAt:“04:00”，描述：“evt3”，id:'00003'}，
{startAt:“00:30”，endsAt:“02:30”，描述：“evt3”，id:“00013'}，
{startAt:“00:00”，endsAt:“01:00”，描述：“evt3”，id:“00014'}，
{startAt:“03:00”，endsAt:“06:00”，描述：“evt4”，id:'00004'}，
{startAt:“01:30”，endsAt:“04:30”，描述：“evt5”，id:'00005'}，
{startAt:“01:30”，endsAt:“07:00”，描述：“evt6”，id:'00006'}，
{startAt:“06:30”，endsAt:“09:00”，description:“evt7”，id:'00007'}，
{startAt:“04:30”，endsAt:“06:00”，描述：“evt8”，id:'00008'}，
{startAt:“05:00”，endsAt:“06:00”，描述：“evt9”，id:'00009'}，
{startAt:“09:00”，endsAt:“10:00”，说明：“e