Как объединить Masonry с Isotope с полностью адаптивным решением + фильтрация и поиск

Я создал код ниже:

http://codepen.io/dkpen/pen/dppoKj?editors=0110

это полностью отзывчиво; и это было обходным решением, чтобы фильтрация изотопов работала с моим реальным решением Masonry; это можно сделать с помощью решения layout none, которое можно найти в дополнительных параметрах Isotope, а затем добавить мой исходный код Masonry (нижняя часть раздела JS ссылки выше).

Проблема в том, что когда я фильтрую данные, кажется, что display:none не добавляется к моему фактическому .box div при инициализации Masonry, поэтому реорганизации макета с отфильтрованными данными не происходит. У вас есть идеи, как я могу это решить? Может быть, объединить или поместить мой код масонства в вариант изотопной раскладки? но тогда этот фрагмент не работал для меня:

columnWidth: function( containerWidth ) {return containerWidth / 4;}

Другие источники, которые я использовал, будут доставлены через раздел комментариев, если их спросят.

+1 интересная вещь: // режим макета, который не позиционирует элементы

Isotope.LayoutMode.create('none');

если я меняю none на masonry анимация не начинает снова выкатывать, просто красиво фильтрует данные (однако реорганизация все равно не работает)


person David Kutas    schedule 19.09.2016    source источник
comment
Ссылки, которые могут помочь понять, как я сделал этот код: codepen.io/desandro/pen/mCdbD codepen.io/desandro/pen/AEslp   -  person David Kutas    schedule 19.09.2016
comment
Зачем вам это делать, когда isotope имеет каменную структуру и уже имеет встроенную фильтрацию и сортировку, а поиск также легко интегрируется с ним?   -  person Macsupport    schedule 20.09.2016


Ответы (1)


Абсолютно верно, Isotope — это решение, так как в него уже встроен макет кладки. Спасибо, парни!

person David Kutas    schedule 16.10.2016