考虑到自由空间/重叠,在水平时间轴中定位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

我认为这不能只用 CSS 来完成，所以我们需要依赖一些 JS/jQuery。

\n\n

我的想法是仅设置元素内的 left 属性，然后循环遍历所有元素来定义顶部值。我首先将 top 设置为 0 并检查该位置是否已经有一个元素。

\n\n

如果没有：我将其放在那里并移至下一个元素。

\n\n

如果是：我增加最高值并再次检查。我继续，直到找到一个地方。

\n\n

这是一个简化的代码，我将随机值设置为左侧并应用上述逻辑。

\n\n

\r\n

\r\n

$(\'.event\').each(function(){\r\n  var top=0;\r\n  var left = Math.floor(Math.random() *(400));\r\n  /* we need to test between left and left+ width of element*/\r\n  var e1 = document.elementFromPoint(left, top);\r\n  var e2 = document.elementFromPoint(left+80, top);\r\n  /* we check only  placed element to avoid cycle*/\r\n    while ((e1 && e1.classList.contains(\'placed\')) || (e2 && e2.classList.contains(\'placed\'))) {\r\n        top += 20; /*Height of an element*/\r\n        e1 = document.elementFromPoint(left, top)\r\n        e2 = document.elementFromPoint(left+80, top)\r\n    }\r\n  $(this).css({top:top, // we set the top value\r\n              left:left, // we set the left value\r\n              zIndex:3// we increase z-index because elementFromPoint consider the topmost element\r\n              });\r\n                \r\n  $(this).addClass(\'placed\'); //we mark the element as placed\r\n});

\r\n

* {\r\n  box-sizing: border-box;\r\n}\r\nbody {\r\n margin:0;\r\n}\r\n\r\n#events {\r\n  height: 300px;\r\n  width:calc(80px * 6 + 2px);\r\n  background:repeating-linear-gradient(to right,blue 0,blue 2px,transparent 2px,transparent 80px);\r\n  position:relative;\r\n}\r\n\r\n.event {\r\n  position: absolute;\r\n  width: 80px;\r\n  height: 20px;\r\n  border: 1px solid #000;\r\n  z-index:2;\r\n  background:red;\r\n  color:#fff;\r\n}

\r\n

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>\r\n<div id="events">\r\n  <div class="event" >\xe2\x80\xa2 Entry 1</div>\r\n  <div class="event" >\xe2\x80\xa2 Entry 2</div>\r\n  <div class="event" >\xe2\x80\xa2 Entry 3</div>\r\n  <div class="event" >\xe2\x80\xa2 Entry 4</div>\r\n  <div class="event" >\xe2\x80\xa2 Entry 5</div>\r\n  <div class="event" >\xe2\x80\xa2 Entry 6</div>\r\n  <div class="event" >\xe2\x80\xa2 Entry 7</div>\r\n  <div class="event" >\xe2\x80\xa2 Entry 8</div>\r\n</div>

\r\n

\r\n

\r\n

\n