jQuery Каменная кладка - элементы не правильно организованы

Question

После изменения формата моего существующего отчета я заметил, что после фильтрации одного из элементов кладка неправильно увольняется. Пример ниже:

http://relevantcodes.com/Tools/ReportUnit/res.html

Обратите внимание, что «фильтр Освещение -> Сдал» не работает пока правильно все другие фильтры работают. Если для «Фильтр-светильники» выбрано «Пройден», элементы располагаются вертикально, а не в предопределенной сетке. Все остальные фильтры работают правильно, то есть они переставляются как по горизонтали, так и по вертикали.

Я пробовал все, но ничего не работает, и это действительно странная проблема.

Answer 1

Из документации кладки:

1. If set to an Element or Selector String, Masonry will use the width of that element. 
2. If columnWidth is not set, Masonry will use the outer width of the first element. 

Я просто вставил элемент проклейки в кладке контейнере, как это так, и это работает.

<div class='container masonry'> 
    <div class='sizer'>..</div> 
    <div class='item'>..</div> 
    <div class='item'>..</div> 
</div> 

.sizer { width: 49%; } // default 

И мой отзывчивый код имеет другую ширину, которую я использую для установки размера.

Answer 2

У вас много javascript, и дисплей очень приятный, но есть одна важная вещь, которую я могу почти гарантировать, - это ваша проблема. Мне очень сложно копировать и проверять, но я бы настоятельно рекомендовал следующее:

Ваш подход к кладке использует фильтр show/hide, который анимируется сам по себе. Задача, которую это ставит, заключается в том, что кладка делает свои расчеты о том, где положить вещи сразу, но показать/скрыть анимации, которые требуют времени, чтобы закончить. То, что у вас осталось, - это основанный на удаче подход к каменной кладке, который знает, каким будет результат. Вот несколько вариантов, которые я бы рассмотрел:

1. Переключение с кладки на изотоп. Это тот же базовый движок, но он имеет встроенную фильтрацию, которая полностью устраняет это осложнение.
2. Задержка настройки кладки до тех пор, пока не завершится показ/скрытие (я считаю, что это 0,5 секунды по умолчанию).
3. Используйте разделитель для каждого элемента. Это весело, но идея состоит в том, что вы помещаете контейнер вокруг своих элементов, который будет отображать/скрывать, который занимает местозаполнитель для ширины/высоты элемента. Вы прикрепляете местозаполнитель div к кладке, так что, пока вы показываете/скрываете свой внутренний элемент, кладка все еще понимает, что это должно быть. Его невидимый для пользователя, поэтому он не имеет заметной разницы.

В любом случае, длинный рассказ, я думаю, что № 1 - лучший подход. Это сэкономит вам значительное время на разработку, чтобы использовать его для фильтрации. # 2 - это вид хака, который, по крайней мере, позволит вам проверить, связана ли проблема с моим ответом. # 3 - это удобная информация, если у вас когда-либо была сетка, в которой есть элементы, которые изменяют размер, когда пользователь взаимодействует с ними.

Надеюсь, что это поможет.