jQuery Isotope — гибкий макет с двумя элементами разного размера

У меня есть базовый макет фотографий (для портфолио) на странице. Есть два кирпича изображения разного размера, больший пропорционален меньшему и ровно в два раза больше ширины и высоты, и нет поля между блоками или окном. Есть только несколько более крупных блоков, смешанных с парой десятков более мелких. Это адаптивный дизайн, поэтому он состоит из пяти столбцов по 20% на полноразмерном сайте и трех столбцов по 33,333%, когда размер окна падает ниже определенной ширины, и все это внутри контейнера максимальной ширины 100%. Изображения устанавливаются на 100% ширину и автоматическую высоту с помощью CSS внутри каждого кирпича. Я включил каркас, чтобы проиллюстрировать то, что я описываю.

Проблема, с которой я сталкиваюсь, заключается в том, чтобы заставить Isotope реагировать на макет жидкости. Если я загружаю страницу в окне шире, чем максимальная ширина, блоки размещаются точно так, как ожидалось. Однако, когда я сжимаю окно браузера ниже максимальной ширины, блоки начинают становиться действительно шаткими, в некоторых вариантах: сложены в один столбец; сложены в два столбца с пустым столбцом между ними; пробелы между изображениями; оставив пустую строку под большим изображением.

Я, вероятно, не очень хорошо объясняю себя, но просто интересно, есть ли у кого-нибудь опыт использования Isotope с плавными макетами и может быть какое-то понимание.

макет


jquery fluid-layout jquery-isotope jquery-masonry
person briteweb    schedule 17.11.2011    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Мне удалось добиться этого, исключив строки кода для расчета столбцов из демонстрации, отвечающей требованиям изотопов. здесь.

$container.isotope({
    itemSelector : '.thumb',
    //disable resizing
    resizable: false,
});

//update columnWidth on window resize
$(window).smartresize(function(){
    $container.isotope({
    });
});

Это поддерживает анимированную возможность «умного изменения размера», но позволяет вам использовать обычные медиа-запросы css для управления количеством столбцов (установите элемент «.thumb» на желаемые проценты контейнера в ваших медиа-запросах).

person Lauren    schedule 14.02.2012
comment
Браво, @Lauren. Ты только что сделал мой ужасный день намного лучше. - person AJB; 15.05.2013

arrow_upward
1
arrow_downward

Я работаю над макетом, который создает аналогичные проблемы, и решил их, используя новый вариант макета упаковки Isotope. Какая находка! — http://isotope.metafizzy.co/layout-modes/packery.html

person Futurefabric    schedule 15.09.2014