Как плотно упаковка блоки разной высоты и ширины?

Question

[Your Friend]

Суть вопроса. Есть макет, в котором блоки разной высоты и длинны расположены в контейнере. При уменьшении экрана расположение блоков должно меняется местами в зависимости от размера окна. Реализовалось это через Masonry, Isotope. Но при уменьшении экрана все равно остаются пустые "дырки" между блоками которые не занимаются рядом стоящими элементами. Есть ли какой то плагин, который будет высчитывать свободное место, и занимать его нужными блоками? Или же есть другие методы?

Answer 1

[Юрий Тарахонич]

Возможно просто стоит вызывать Masonry повторно, при ресайзе объекта/экрана?
По логике он должен будет перестраивать сетку.

Answer 2

[Your Friend]

При таком вызове, Masonry вызывается по 300 раз, т.к. реагирует на изменения каждого пикселя. Да и брейкпоинтов много сильно получается. Как справиться с этим? На каждую точку прописывать что ли? Ниже код вызова, может там допускаю ошибку?
$(window).resize(function () {
initMasonry();
});
function initMasonry(){
$('#main-block').masonry({
itemSelector: '.block',
columnWidth: 5,
layoutPriorities: {
upperPosition: 1,
shelfOrder: 0
}
});
}

Comments

[Юрий Тарахонич]

При ресайзе сохранять время и флаг is_resized, и раз в 500мс проверять. Если по прошествию 500мс флаг is_resized = true, выполнять перестраивание сетки и сбрасывать флаг.
В такой ситуации сетка не будет прыгать и перестраиваться при малейшем сдвиге.

[Your Friend]

Интересное решение... Спасибо!