Легкая альтернатива 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 (+ равно включено, - равно исключено):

Macy.js: Анимация +, Фильтрация - (Очень мало документации о переходе css)
gridfolio: Animation+, фильтрация -
Mansory: анимация +, фильтрация - - (но может быть с https://github.com/dynamick/multiple-filter-masonry)
Filtrify: анимация -, фильтрация +
Tympanus CSS Tutorial: Анимация +, Фильтрация -
Boardz.css: Анимация -, Фильтрация - (Следует упомянуть только библиотеку HQ CSS only)
jquery Woodmark: анимация +, фильтрация - (полированная демо)

Ответ 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.