Адаптивная masonry сетка на чистом JS | HTML, CSS, JS
HTML-код
- Опубликовано: 3 авг 2024
- В текущем примере создадим masonry сетку с динамическим контентом на чистом JavaScript.
🍀 Поддержать канал: www.donationalerts.com/r/webe...
☕️ Купить кофе: buy.stripe.com/5kA7sL9574SG7x...
🎨 Купить набор кистей Procreate: webelart.com/illustration.
✍️ Мой telegram channel: t.me/webelart
🏰 Английский RUclips: @webelart_en
💁🏼♀️ Инстаграм: / webelart
🦄 LinkedIn: / webelart
❤️ Демо + исходники: webelart.com/lessons/masonry_...
❤️ Патреон: / webelart
00:00 введение.
01:14 уроки и patreon.
01:55 разбираем html.
05:53 разбираем css.
14:57 разбираем js.
33:57 фиксим багу.
35:24 заключение.
ССЫЛКИ
- Статья про загрузку шрифтов: css-tricks.com/how-to-load-fo...
На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анимации, веб-дизайн.
![[BLACKSWAN] ‘Roll Up’ Official Music Video](http://i.ytimg.com/vi/ulvCwyKrwqw/mqdefault.jpg)
Елена, урок супер! Спасибо огромное! Не хотел использовать громоздкую библиотеку, а у Вас всё лаконично и самое необходимое.
каким-то макаром это сработало........я в шоке просто)))Огромное спасибо !!!! Я так замучилась с этими масонами, но самой додумать и такое прописать пока нет возможности)))))Спасибо!!!!!
Это то, что я искала, спасибо!!!!
Всем советую смотреть уроки от Елены!
Спасибо! ❤️
У нас в городе первая волна начиналась 13 июля 2020 года. А 4 октября главврач ЦРБ жаловалась, что у нас что-то много заболевших за последнюю неделю и они не понимают почему.
По поводу транзишена, там где ресайз метод в сеттаймаут нужно ставить время такое же как указано в транзишене, то есть не 100 мс, а 300
Если вы про debounce в событии resize, то 100мс не связаны с transition, поэтому нет необходимости указывать 300мс. По факту событие resize вызывается огромное количество раз, debounce делает так, чтобы если мы остановились по умолчанию на 100мс, то она сработает и вызовется перестройка, а в ней уже сработает transition.
Это на практике очень хорошо видно если поставить побольше времени например 1000ms, со 100ms сложнее, т.к. любая небольшая задержка уже отрабатывает (мне кстати это нравится с практической стороны) :) Но если поставить допустим 1000мс и вертеть быстро браузером вызывая resize, то контент вообще не перестраивается и не меняется, оставаясь на тех же местах, как только мы отпускаем окно браузера, после задержки time происходит перестройка.
Так анимация сдвига элементов ещё не завершена к моменту останова ресайза окна, и функция setParameters как раз вызывается со старыми параметрами
@@sergeys4732 Насколько я поняла, вас беспокоит ситуация, когда допустим идёт анимация элементов 300мс, и мы за это время успели отресайзить остановить и ещё раз ресайзить. В целом если бы в коде были зависимости от прошлых позиций, то возможно это могло бы заафектиться.
Но ширины высчитываются от ширины родительского элемента у него нет transition на ширину (и это актуальный параметр containerWidth(this.containerNode.offsetWidth)), высоты уже после ширин, и определяются новые позиции исходя из настроек и новых ширин, которые также рассчитываются от containerWidth. Т.е. никаких конфликтов с прошлыми значениями. Даже если анимация позиции прошлой не завершена, будет задана новая и элементы полетят в новых направлениях.
Если ещё чувствуете конфликт, уточните, какой параметр смутил?
@@webelart с таким объяснением перестал чувствовать ))
Елена, спасибо за урок, но как выпилить отсюда шрифт?))) чтобы не было зависимости от Montserrat?
Его можно просто удалить, где google.fonts загрузка и заиспользовать что-то другое. Например, arial или другой шрифт
@@webelart Лена, спасибо Вам огромное. Не получалось еще и потому что и в JS файле нужно было название шрифта сменить.
@@delosait Давайте, я в вас верю!
Елена - а вы сильны сделать так, чтобы кнопкой можно было бы менять число столбцов без перегрузки страницы? Просто хочу сделать так а знаний не хватает... а вас приятно да же слушать. Если поможете буду вынужден подписаться с колокольчиком
Сильна сделать, но это доп. услуга и подписка с колокольчиком мне никакой выгоды не даёт. 🙃 Я пока не зарабатываю с RUclips и снимаю ролики по своему намерению и вдохновению. Скоро на моём сайте появятся курсы и возможно доп. услуги по помощи, конечно за плату. Поэтому следите за новостями. 😘
@@webelart Вы молодец
@@PS-tn6mc Спасибо! ❤️
@@webelart У Вас все задатки успешного учителя 🚸
@@PS-tn6mc Вы меня захвалили, спасибо! ❤️
А в чем проблема задать высоту 75% вместо padding-bottom, ведь она берется от высоты родителя, то есть основного контейнера для карточки?
А на практике проверяли? Уверены, что работает? :)
По факту высота там немного странно исчисляется, если конкретная высота у родителя задана, то должно работать. Но такие динамические карточки поддерживаться не будут. Можете здесь ещё подробнее почитать stackoverflow.com/questions/5657964/css-why-doesn-t-percentage-height-work
@@webelart да спасибо, прочитал)
How did you learn to do this?
Just 10 years of web development experience. 😊
Херня! Написала что на чистом js а сама подключила библиотеку
Какую? Вы точно видео смотрели? Внутри библиотек нет, даже gulp для сборки не использовала.