JQuery масонство лучше оптимизировать пробельный путем изменения порядка элементов

Question

Я в настоящее время работаю со следующим кодом: JSFIDDLE

Как вы можете видеть, у меня есть некоторые вещи, которые занимают 50% («вещь») горизонтального пространства и 1 элемент, который занимает 100% («item double»). Высота предметов может отличаться, но не значительно.

.item { width: 50%; } 
.item.double { width: 100%; } 


$(window).load(function() { 

    $container = $('#container'); 
    $container.masonry({ 
     "itemSelector": ".item", 
     "columnWidth": ".grid-sizer", 
     "transitionDuration": 0 
    }); 

}); 

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

Есть ли способ исправить это с помощью кладки JQuery или мне нужно прибегнуть к Isotope (или пользовательскому коду)? Исправление будет делать только необходимые перестановки, сохраняя первоначальный порядок как можно больше.

Я изучил варианты масонства и связанные с ним вопросы Stackoverflow, но я еще не наткнулся на решение.

Answer 1

Масонство действительно может быть расширено, чтобы изменить порядок элементов, но я, наконец, выбрал Isotope packery layout. Запросы в средствах массовой информации запускаются просто отлично, с которыми у меня возникли проблемы с использованием сценария масонства. Похоже, мне все равно нужно смешивать некоторые элементы «наполнителя» в элементе .isotope, чтобы избежать пробелов, которые появляются прямо в среднем столбце. Если кто-либо сталкивается с этой проблемой, стоит выбрать Isotope над пакетом Masonry, есть еще много вариантов, даже если оно поставляется с коммерческой лицензией.