ixon
@ixon


Как сортировать блоки по размеру так, чтобы они заполнили всё свободное пространство?

У меня есть некоторые 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, но не вышло. Какой алгаритм для сортировки таких блоков использовать? Даже не представляю по какому принципу это реализовать.
  • Вопрос задан
  • 191 просмотр
Решения вопроса 1
ixon
@ixon Автор вопроса

Masonry всё-таки оказался решением. Просто, для его работы нужно избыточное количество блоков, которые можно двигать, заполняя свободное место.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы