На сайте используется галерея с фотографиями разной высоты, по идеи к ней идельно подходит плагин Masonry
https://masonry.desandro.com/ , качнул, поставил, не могу заставить адаптироваться. В начале у меня показывает 5 колонок (так же как и в будущей галереи) потом должно становиться 3, 2 и 1 в зависимости от ширины экрана. Скрипт запускаю вот так:
var $container = $('#gallary');
// Инициализация
$container.masonry({
itemSelector: '.item',
//element width
columnWidth: '.sizer', //Ширина в процентах
percentPosition: true,
isResizeBound: true
});
вот такие стили:
.container {
width: 1200px;
margin: 0 auto;
}
.sizer, .item { width: 20%; }
.item.w2 { width: 50%; }
.item img {
max-width: 100%;
height: auto;
}
всё работает, но при уменьшении окна адаптации нет. Подумал что ширина колонок будет перестраиваться основываясь на стилях .sizer который указан в параметрах плагина как columnWidth. Добавил медиа-запрос меняющий ширину sizer:
@media screen and (max-width: 1300px) {
.sizer, .item { width: 25%; }
}
не помогло, всё наезжает друг на друга при уменьшении окна . Как заставить masonry адаптировать колонки так как мне надо? На сайте плагина есть пару примеров, тут адаптация работает
https://tympanus.net/Development/GridLoadingEffect... но к сожалению не разобрался как =(
