Как создать мозайку из блоков?

Question

[Сергей]

Имеется блок DIV (position: relative) отмечен зеленым. Он имеет определенную ширину и высоту. В нем располагаются другие блоки DIV (position: absolute), они имеют определенную высоту и отступ сверху (top). Все эти значения на левой картинки не меняются. Случается что эти блоки пересекаются, и тогда мне нужно вычислить ширину блоков и отступ слева, что бы в итоге получилось как на правой картинке. Подскажите пожалуйста алгоритм, или может готовые решения или направления в какую сторону двигаться. Все координаты имеются на сервере, так что рассчитать желательно на php, но можно и на JS.


Делаю календарь на подобие как в bitrix24

Answer 1

[Дима Паутов]

masonry.desandro.com

Comments

[Сергей]

Не подходит, т.к мои блоки должны оставаться на той же высоте. Им нужно только рассчитать ширину и отступ слева

Answer 2

[Андрей]

CollagePlus

Answer 3

[GreatRash]

А они прям обязательно должны быть абсолютными?

Comments

[Сергей]

нет, но вертикальное расположение должно быть именно такое. Это календарь, по оси Y располагается время, высота блока это задача у которой есть время начала и время окончания.

[GreatRash]

Frosty 87: codepen.io/GreatRash/pen/jWJrjM - ???

[Сергей]

Не пойдет, мне нужно позиционировать блоки относительно родительского элемента wrapper. Я прикрепил скрин еще один это примерно что я делаю и как должно быть