Легкая альтернатива isotope.js

Я использую isotope.js исключительно из-за его анимации для добавления/удаления элементов.

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

Дело в том, что мои элементы сетки имеют фиксированный и равный размер, и мне не нужен ни один из фильтрующих материалов. Я считаю изотоп немного неуклюжим, возможно, из-за широты его функциональности.

Итак, я ищу альтернативу, которая:

  • легкий
  • скользкий
  • надежный и готовый продукт
  • способен грациозно деградировать

Ответ 1

Оригинальный ответ

Если кто-то все еще ищет, вы также можете захотеть взглянуть на похожий плагин jQuery, который я написал, Filterizr. Фильтризр это:

  • Позволяет фильтровать, сортировать, перемешивать и искать
  • Возможность настройки (позволяет пользователям создавать свои собственные CSS-эффекты для переходов при фильтрации и выходе)
  • Использует CSS3 переходы и трансформируют-переводят.
  • Легкий, ~ 20 КБ
  • Оптимизирован для мобильной производительности
  • Отзывчивый (с вашими медиа-запросами)
  • Открытый исходный код и MIT лицензированы

Скачать ссылки, учебные пособия и документы на сайте Filterizr


Обновление 06/2019:

Filterizr прошел долгий путь с тех пор.

Теперь он написан на языке JavaScript JavaScript и может использоваться без jQuery в качестве стандартной библиотеки JavaScript.

Он по-прежнему допускает использование в качестве плагина jQuery, хотя вы все еще можете обратиться к сайту Filterizr, так как он актуален.

Ответ 2

Похоже, вы ищете JQuery Masonry.

В целом, изотоп в большинстве случаев довольно изящен, все, конечно, зависит от объема контента, который вы к нему добавляете.

Причиной неуклюжести может быть сама JQuery. В то время как jQuery является удивительным селектором, его анимация и скорость манипулирования немного не хватает из-за огромного количества функциональности, включенной в lib.

Ответ 3

В случае, если кто-то все еще ищет чек Shuffle.js. Он реагирует наряду с лицензией MIT.

Ответ 4

Я также ищу, которые имеют расширенный фильтр с анимацией:

Muuri - MIT с открытым исходным кодом (кажутся быстрыми и хорошими)

MixitUp - Высококачественная коммерческая библиотека (Extreme Polished)

Другие открытые исходные коды либо не имеют ни функции, ни необязательного расширения. Хорошо, если вам нужна быстрая анимация, например Macy.js, gridfolio, Tympanus CSS (+ равно включено, - равно исключено):

Ответ 5

im, используя jquery Quicksand, который является довольно аккуратным и прямым http://razorjack.net/quicksand/

Ответ 6

Существует простая легкая альтернатива изотопу codepen

всего несколько шагов для настройки

  • Элементы навигации имеют класс .filter и data-target, в котором будут отображаться элементы с data-category значением, равным его значению.
  • Элементы сетки имеют класс .item и data-category принимает несколько значений.

Чтобы изменить поле между элементами, измените ширину item-inner.

Чтобы изменить изменение анимации transform, которое существует в javascript ниже комментария animation fadein/fadeout.