javascript - 考虑到可用空间/重叠，在水平时间轴中定位 div 的最佳方式

Question

我正在尝试创建一个水平时间轴，但我不确定正确安排事件 div 的最佳方式。目前它看起来像这样:

<div id="events">
    <div class="event" style="left:25; position:relative;" id="1">• Entry 1</div>
    <div class="event" style="left:25; position:relative;" id="2">• Entry 2</div>
    <div class="event" style="left:50; position:relative;" id="3">• Entry 3</div>
    <div class="event" style="left:375; position:relative;" id="4">• Entry 4</div>
</div>

我正在尝试让 Entry 4 将自己定位在顶部(因为没有 div 挡住)，但我不确定最佳解决方案。它还需要允许任意数量的事件重叠。

大多数 css 选项/jQuery 插件似乎没有提供解决方案，据我所知，它们主要用于灵活的网格，但这只需要在垂直方向上灵活，并在水平方向上有固定的位置以与日期正确对齐.

显然第一步是 position: absolute 并设置 top: x 但是如何检查以前的条目以确保它不与旧的 & 重叠更长的条目。时间线将包含许多不同长度的事件，因此它也不能太密集。

关于最好/最简单的方法有什么建议吗？

Answer 1

我假设您有一个包含开始日期和结束日期的事件数组，那么您应该检查事件的开始日期和结束日期是否重叠。要对此进行模拟，您可以检查此方法:

var events = [{
  start: "2018/10/24 15:00",
  end: "2018/10/24 18:00"
}, {
  start: "2018/10/25 12:00",
  end: "2018/10/26 12:00"
}, {
  start: "2018/10/25 07:00",
  end: "2018/10/25 10:00"
}, {
  start: "2018/10/24 12:00",
  end: "2018/10/24 20:00"
}, {
  start: "2018/10/25 08:00",
  end: "2018/10/25 13:00"
}];

var stack = [],  
  s = 0,
  lastStartDate, lastEndDate, newEvents;
events.sort(function(a,b){
   if(a.start > b.start) return 1;
   if(a.start < b.start) return -1;
   return 0;
});
while (events.length > 0) {
  stack[s] = [];
  newEvents = [];
  stack[s].push(events[0]);
  lastStartDate = events[0].start;
  lastEndDate = events[0].end;
  for (var i = 1; i < events.length; i++) {
    if (events[i].end < lastStartDate) {
      stack[s].push(events[i]);
      lastStartDate = events[i].start;
      delete events[i];
    } else if (events[i].start > lastEndDate) {
      stack[s].push(events[i]);
      lastEndDate = events[i].end;      
    }else{
      newEvents.push(events[i]);
    }
  }
  events = newEvents;
  s++;
}

console.log(stack);

该方法选择第一个事件作为键，并检查其他事件是否重叠，如果它们不重叠，它们将被添加到第一个堆栈，然后如果还有事件剩余，则新堆栈将被创建，然后使用剩余的事件，代码将再次运行并再次准备一个新的堆栈。在数组中剩下任何事件之前，它应该继续创建堆栈。

然后您可以使用这些堆栈来构建您的事件网格。每行一堆。

我在我的 Evendar 中使用了这个算法插入。您可以检查它的 GridView 。