У меня есть некоторые div блоки прямоугольной формой как бы кратной квадратам с соотношениями сторон 1x1, 1x2, 1x3, 2x1, 2x2, 2x3, 3x1, 3x2. Эти блоки на странице с помощью php скрипта появляются в случайном порядке.
Как мне поменять порядок этих блоков так, чтобы они заполнили собой всё свободное пространство?
Например, у меня появились следующие блоки:
.toc-box{
width:25%;
height:calc((100vw - 20px) * 0.25);
position: relative;
padding: 15px;
background:#00ff00;
display:block;
float:left;
margin:0;
}
.toc-box.col-1{
width:25%;
}
.toc-box.col-2{
width:50%;
}
.toc-box.col-3{
width:75%;
}
.toc-box.col-4{
width:100%;
}
.toc-box.hei-1{
height:calc((100vw - 20px) * 0.25);
}
.toc-box.hei-2{
height:calc((100vw - 20px) * 0.5);
}
.toc-box.hei-3{
height:calc((100vw - 20px) * 0.75);
}
<div class="content">
<div style="background:#00ffff" class="toc-box col-1 hei-1">6</div>
<div style="background:#ff0000" class="toc-box col-1 hei-2">1</div>
<div style="background:#00ff00" class="toc-box col-1 hei-2">2</div>
<div style="background:#0000ff" class="toc-box col-2 hei-1">3</div>
<div style="background:#ffff00" class="toc-box col-2 hei-1">4</div>
<div style="background:#ff00ff" class="toc-box col-3 hei-1">5</div>
</div>
Было бы логично поставить блок 6 в самый конец, после блока 5, тогда свободного пространства между блоками не будет и они как бы из кирпичиков собирутся в монолитную стену.
Какие готовые библиотеки для этого существуют? Я пытался сделать это с помощью masonry, но не вышло. Какой алгаритм для сортировки таких блоков использовать? Даже не представляю по какому принципу это реализовать.
