JQuery Isotope - гибкая компоновка с двумя элементами разных размеров

Question

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

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

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

Answer 1

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

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

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

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

Answer 2

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