Макет кладки не заполняет пространство при фильтрации

Я сделал макет кладки, который фильтруется по щелчку.

По какой-то причине, когда выбраны некоторые из кнопок, макет кладки перемещается влево и складывает все элементы друг над другом вместо того, чтобы заполнять контейнер. Я не уверен, почему это происходит, на изотопе это нормально:

$grid.isotope({ layoutMode: 'masonry' })

В Masonry, похоже, нет встроенного layoutMode, и я не могу использовать Isotope для этого проекта.

Я не уверен, где я ошибаюсь, вот код: http://codepen.io/H0BB5/pen/ORVBzm

макет идеально подходит для «просмотреть все» и «поздравить», но не для «спасибо».

Изменить: я заметил, что причиной заполнения пространства «поздравлениями» является то, что первые два элемента сетки в HTML имеют класс «поздравления». Это должно каким-то образом заставлять макет заполняться по горизонтали, а не по вертикали. Все еще не нашел исправления.


javascript jquery masonry jquery-isotope jquery-masonry
person h0bb5    schedule 08.09.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

В итоге я выяснил проблему. Если у кого-то еще есть такая же проблема, я нашел свое решение, прочитав документацию дальше.

<div class="grid">
  <!-- .grid-sizer empty element, only used for element sizing -->
  <div class="grid-sizer"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  ...
</div>

/* fluid 5 columns */
.grid-sizer,
.grid-item { width: 20%; }
/* 2 columns wide */
.grid-item--width2 { width: 40%; }
// use outer width of grid-sizer for columnWidth
columnWidth: '.grid-sizer',
itemSelector: '.grid-item',
percentPosition: true

теперь рабочее перо: http://codepen.io/H0BB5/pen/ORVBzm

person h0bb5    schedule 08.09.2016