Задать вопрос
@johnylikejuice
Front end developer

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

Суть вопроса. Есть макет, в котором блоки разной высоты и длинны расположены в контейнере. При уменьшении экрана расположение блоков должно меняется местами в зависимости от размера окна. Реализовалось это через Masonry, Isotope. Но при уменьшении экрана все равно остаются пустые "дырки" между блоками которые не занимаются рядом стоящими элементами. Есть ли какой то плагин, который будет высчитывать свободное место, и занимать его нужными блоками? Или же есть другие методы?
  • Вопрос задан
  • 492 просмотра
Подписаться 1 Оценить Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Фронтенд-разработчик
    10 месяцев
    Далее
  • Skillfactory
    Профессия Веб-разработчик
    12 месяцев
    Далее
  • Яндекс Практикум
    Мидл фронтенд-разработчик
    5 месяцев
    Далее
Пригласить эксперта
Ответы на вопрос 2
sofcase
@sofcase
Веб-разработчик
Возможно просто стоит вызывать Masonry повторно, при ресайзе объекта/экрана?
По логике он должен будет перестраивать сетку.
Ответ написан
Комментировать
@johnylikejuice Автор вопроса
Front end developer
При таком вызове, Masonry вызывается по 300 раз, т.к. реагирует на изменения каждого пикселя. Да и брейкпоинтов много сильно получается. Как справиться с этим? На каждую точку прописывать что ли? Ниже код вызова, может там допускаю ошибку?
$(window).resize(function () {
initMasonry();
});
function initMasonry(){
$('#main-block').masonry({
itemSelector: '.block',
columnWidth: 5,
layoutPriorities: {
upperPosition: 1,
shelfOrder: 0
}
});
}
Ответ написан
Ваш ответ на вопрос

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

Похожие вопросы