No video
JS-плагины №11. Masonry-сетка с сортировкой и фильтрацией - izotope.js
Рет қаралды 5,442
Күн бұрынПривет! В этом видео разберем, как же сделать простую, но функциональную masonry-сетку с сортировкой и фильтрацией элементов. Поехали!
github.com/max... - исходники видео на GitHub
isotope.metafi... - библиотека izotope.js
Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
Понравилось? clck.ru/Gr9Ec
Моя страница вконтакте: maxdenaro
Мой блог: blog.maxgraph.ru
Мой сайт: maxgraph.ru
Канал в телеграм: teleg.run/maxg...
Чат для верстальщиков: teleg.run/maxg...
#ityoutubersru #masonry #izotopejs
@alexandrgusletsov2567 3 жыл бұрын
Спасибо Максим , посмотрел, поднял свой опыт, поднял рейтинг Максиму
@maxgraph 3 жыл бұрын
Пожалуйста)
@user-ix1hk9mm6u 3 жыл бұрын
О Боги. До этого я делал это вручную))). Спасибо что поведали об этом плагине
@maxgraph 3 жыл бұрын
Не за что))
@plantlife1710 3 жыл бұрын
Невероятно полезный плагин! Спасибо за открытие
@elitdie 3 жыл бұрын
Плагин взял на заметку, как раз вовремя))) спасибо!
@user-dk9yl4ct7b 3 жыл бұрын
Отличное видео. Сейчас только надо попроктиковатся и будет счастье.
@maxgraph 3 жыл бұрын
спасибо)
@aleksius7819 3 жыл бұрын
спасибо. хорошее видео. сейчас попробую применить его
@veterok54 3 жыл бұрын
Интересно
@elitdie 3 жыл бұрын
elem не зарезервирован, ты просто elem в самом начале определил, в функции прописал внутреннюю переменную element, а обратился к внешней elem. Нормальная ситуация)) И кстати если есть желание, попробуй шорткаты в VS Code. Жить не могу без Ctrl+Shift+(D/K/Up/Down) )))
@maxgraph 3 жыл бұрын
Уже привычки другие выработались) спасибо
@azaternis 3 жыл бұрын
Спасибо
@elif.3258 Жыл бұрын
Спасибо за видео, до вас не знала о Isotope. Сделала фильтр по чекбоксам. А вот сделать фильтр по группам чек боксов не получается. Пробовали такое делать?
@maxgraph Жыл бұрын
Нет
@alexandrgusletsov2567 10 ай бұрын
18:20 function priceWithoutSpaces
@denysmaksymuck 3 жыл бұрын
Сори что спрашиваю не по теме, но сколько у вас дюймов монитор?
@maxgraph 3 жыл бұрын
Два по 27
@deniskotov 2 жыл бұрын
Макс, подскажи, пожалуйста: если мне нужно сверстать масонри сетку, в которой нет четких рядов и колонок, я сверстал ее на гридах, использовал грид-темплейт-ареас, но при добавлении еще элементов в сетку, они просто не отображаются. Это из-за использования ареас? Как сделать так, чтобы при превышении количества элементов по макету, новые элементы тоже отображались? В какую сторону копать?
@maxgraph 2 жыл бұрын
Скорее всего из-за ареас. Нужно делать без них, на grid auto rows возможно
@deniskotov 2 жыл бұрын
@@maxgraph оо, спасибо!! Реально помог. Я подозревал, но так до конца и не сообразил)) Спасибо большое))
@elenkarnaeva2458 3 жыл бұрын
Подскажите пож-та, как прописать в js класс active кнопкам в фильтре. Благодарю за канал!
@maxgraph 3 жыл бұрын
Не очень понял)
@elenkarnaeva2458 3 жыл бұрын
Спасибо! А если товаров много - как сделать пагинацию? Или это отдельная история?
@maxgraph 3 жыл бұрын
Это отдельная тема, да)
@elenkarnaeva2458 3 жыл бұрын
@@maxgraph Спасибо большое!
@ArrendadorDivisa 2 жыл бұрын
Как устранить подергивание карточек которое возникает в моем проекте при анимации в результате фильтрации isotope ?
@maxgraph 2 жыл бұрын
Как правило проблема в стилях. Удалите их, постепенно добавляйте и смотрите
@ilnurKhalDrogo 3 жыл бұрын
У меня есть закрытые блоки. По нажатию кнопки они открываются, но в одном месте. Чтобы нормально отображалось, нужно нажать ещё кнопку "все элементы". То есть при нажатии на кнопку, открывающий блоки, срабатывало и нажатие на кнопку "все элементы". Как это сделать?
@maxgraph 3 жыл бұрын
Очень сложно понять, что именно требуется. Можете в личку написать в вк или телегу со скриншотами
@elitdie 3 жыл бұрын
При нажатии на кнопку вызывай принудительно iso.arrange({filter: `*`}). Естественно, iso уже должен быть проинициализирован как isotope сетка
@mb_later_man 2 жыл бұрын
Делал карточки флексами justify-content space-between, чтобы они расположились на всю ширину контейнера с отступами, после подключил плагин изотоп и карточки в итоге слиплись(( причем у них абсолютное позиционирование. Убрал флекс все равно не помогло, что может быть?(((
@maxgraph 2 жыл бұрын
Возможно плагин инициализируется раньше, чем рисуются элементы
@mb_later_man 2 жыл бұрын
@@maxgraph а через сам плагин можно добавлять или менять стили?
@PS-tn6mc 3 жыл бұрын
Не подскажите как менять кнопкой число столбцов на странице?
@maxgraph 3 жыл бұрын
Можно получать число, отключать плагин, вставлять число и снова запускать
@PS-tn6mc 3 жыл бұрын
@@maxgraph для меня это как на луну слетать... Может где код готовый посмотреть можно? На codepen.io искал и не смог найти
@ozimnadius 3 жыл бұрын
А зачем ты всегда функции записываешь в переменные, это же неудобно?
@maxgraph 3 жыл бұрын
Ну было бы неудобно - я бы не писал)
Friendeez
Рет қаралды 20 МЛН
MaxGraph - cайты как страсть
Рет қаралды 29 М.
MaxGraph - cайты как страсть
Рет қаралды 8 М.