Это видео недоступно.
Сожалеем об этом.
JS-плагины №11. Masonry-сетка с сортировкой и фильтрацией - izotope.js
HTML-код
- Опубликовано: 1 дек 2020
- Привет! В этом видео разберем, как же сделать простую, но функциональную masonry-сетку с сортировкой и фильтрацией элементов. Поехали!
github.com/maxdenaro/maxgraph... - исходники видео на GitHub
isotope.metafizzy.co/ - библиотека izotope.js
Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
Понравилось? clck.ru/Gr9Ec
Моя страница вконтакте: maxdenaro
Мой блог: blog.maxgraph.ru
Мой сайт: maxgraph.ru
Канал в телеграм: teleg.run/maxgraph
Чат для верстальщиков: teleg.run/maxgraph_chat
#ityoutubersru #masonry #izotopejs
Спасибо Максим , посмотрел, поднял свой опыт, поднял рейтинг Максиму
Пожалуйста)
О Боги. До этого я делал это вручную))). Спасибо что поведали об этом плагине
Не за что))
Плагин взял на заметку, как раз вовремя))) спасибо!
Невероятно полезный плагин! Спасибо за открытие
Отличное видео.
Сейчас только надо попроктиковатся и будет счастье.
спасибо)
спасибо. хорошее видео. сейчас попробую применить его
Интересно
18:20 function priceWithoutSpaces
Спасибо
elem не зарезервирован, ты просто elem в самом начале определил, в функции прописал внутреннюю переменную element, а обратился к внешней elem. Нормальная ситуация)) И кстати если есть желание, попробуй шорткаты в VS Code. Жить не могу без Ctrl+Shift+(D/K/Up/Down) )))
Уже привычки другие выработались) спасибо
Спасибо за видео, до вас не знала о Isotope. Сделала фильтр по чекбоксам. А вот сделать фильтр по группам чек боксов не получается. Пробовали такое делать?
Нет
Подскажите пож-та, как прописать в js класс active кнопкам в фильтре. Благодарю за канал!
Не очень понял)
Макс, подскажи, пожалуйста: если мне нужно сверстать масонри сетку, в которой нет четких рядов и колонок, я сверстал ее на гридах, использовал грид-темплейт-ареас, но при добавлении еще элементов в сетку, они просто не отображаются. Это из-за использования ареас? Как сделать так, чтобы при превышении количества элементов по макету, новые элементы тоже отображались? В какую сторону копать?
Скорее всего из-за ареас. Нужно делать без них, на grid auto rows возможно
@@maxgraph оо, спасибо!! Реально помог. Я подозревал, но так до конца и не сообразил)) Спасибо большое))
Сори что спрашиваю не по теме, но сколько у вас дюймов монитор?
Два по 27
Спасибо! А если товаров много - как сделать пагинацию? Или это отдельная история?
Это отдельная тема, да)
@@maxgraph Спасибо большое!
У меня есть закрытые блоки. По нажатию кнопки они открываются, но в одном месте. Чтобы нормально отображалось, нужно нажать ещё кнопку "все элементы". То есть при нажатии на кнопку, открывающий блоки, срабатывало и нажатие на кнопку "все элементы". Как это сделать?
Очень сложно понять, что именно требуется. Можете в личку написать в вк или телегу со скриншотами
При нажатии на кнопку вызывай принудительно iso.arrange({filter: `*`}). Естественно, iso уже должен быть проинициализирован как isotope сетка
Как устранить подергивание карточек которое возникает в моем проекте при анимации в результате фильтрации isotope ?
Как правило проблема в стилях. Удалите их, постепенно добавляйте и смотрите
Не подскажите как менять кнопкой число столбцов на странице?
Можно получать число, отключать плагин, вставлять число и снова запускать
@@maxgraph для меня это как на луну слетать... Может где код готовый посмотреть можно? На codepen.io искал и не смог найти
Делал карточки флексами justify-content space-between, чтобы они расположились на всю ширину контейнера с отступами, после подключил плагин изотоп и карточки в итоге слиплись(( причем у них абсолютное позиционирование. Убрал флекс все равно не помогло, что может быть?(((
Возможно плагин инициализируется раньше, чем рисуются элементы
@@maxgraph а через сам плагин можно добавлять или менять стили?
А зачем ты всегда функции записываешь в переменные, это же неудобно?
Ну было бы неудобно - я бы не писал)