Адаптивная masonry сетка на чистом JS | HTML, CSS, JS

preview_player
Показать описание
В текущем примере создадим masonry сетку с динамическим контентом на чистом JavaScript.
🏰 Английский YouTube: @webelart_en

00:00 введение.
01:14 уроки и patreon.
01:55 разбираем html.
05:53 разбираем css.
14:57 разбираем js.
33:57 фиксим багу.
35:24 заключение.

ССЫЛКИ

На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анимации, веб-дизайн.
  1. Елена Литвинова — Искусство Веб-разработки 🛸
  2. Елена Литвинова
  3. Искусство веб-разработки
  4. webelart
  5. уроки по html
  6. уроки по css
Рекомендации по теме
Адаптивная masonry сетка 0:35:53

Адаптивная masonry сетка на чистом JS | HTML, CSS, JS

JS-плагины №11. Masonry-сетка 0:21:30

JS-плагины №11. Masonry-сетка с сортировкой и фильтрацией - izotope.js...

jQuery Masonry vs 0:17:27

jQuery Masonry vs pure CSS. Выравниваем блоки с картинками. Сетка, плитка, кирпичная кладка....

Создаем адаптивную галерею 0:10:34

Создаем адаптивную галерею для сайта / Адаптивная сетка на CSS...

Masonry Grid [ 0:01:26

Masonry Grid [ 12 Best CSS Masonry Layout Examples ]

Плиточная верстка вебфлоу, 0:08:43

Плиточная верстка вебфлоу, нестандартная сетка блоков на webflow, делаем masonry grid...

Learn Masonry JS 0:05:01

Learn Masonry JS in 5 Minutes

Masonry Simple JavaScript/CSS 0:01:00

Masonry Simple JavaScript/CSS Function example

CSS Grid Masonry 0:15:51

CSS Grid Masonry Layout || CSS Grid Layout-2020

Masonry галерея с 0:32:14

Masonry галерея с ровным окончанием | HTML, CSS, JS

Grid Masonry | 0:06:49

Grid Masonry | sem jquery | sem dependência | Macy JS

Создание адаптивных плиток 0:27:50

Создание адаптивных плиток на сайте с помощью Masonry

Responsive Grid Masonry 0:07:01

Responsive Grid Masonry - Bootstrap Masonry JS | Code BR

Responsive MASONRY GRID 0:12:48

Responsive MASONRY GRID with FILTER and animations. HTML CSS JAVASCRIPT

Responsive Masonry Layout 0:05:37

Responsive Masonry Layout

Pure CSS Masonry 0:07:18

Pure CSS Masonry Grid Design | Quick Tutorial

CSS Grid #2 0:12:16

CSS Grid #2 Явная и неявная сетки

Верстаем анимации на 0:01:48

Верстаем анимации на совместном стриме c kirjs

Build A Masonry 0:07:36

Build A Masonry Grid With The Masonry JS Library | Quick Tutorial

Na czym polega 0:00:24

Na czym polega Infinite-Scroll?

CSS Grid #3 0:10:57

CSS Grid #3 Расположение элементов по линиям сетки

Masonry Grid layout 0:04:32

Masonry Grid layout ep 02

адаптивная галерея 0:00:18

адаптивная галерея

CSS und JavaScript 0:39:13

CSS und JavaScript Tutorial | Masonry Layout

Комментарии
Автор

Елена, урок супер! Спасибо огромное! Не хотел использовать громоздкую библиотеку, а у Вас всё лаконично и самое необходимое.

ArabicLang.online
Автор

каким-то макаром это в шоке просто)))Огромное спасибо !!!! Я так замучилась с этими масонами, но самой додумать и такое прописать пока нет

ВероникаЧернобай-ъл
Автор

Елена, спасибо за урок, но как выпилить отсюда шрифт?))) чтобы не было зависимости от Montserrat?

delosait
Автор

По поводу транзишена, там где ресайз метод в сеттаймаут нужно ставить время такое же как указано в транзишене, то есть не 100 мс, а 300

sergeys
Автор

А в чем проблема задать высоту 75% вместо padding-bottom, ведь она берется от высоты родителя, то есть основного контейнера для карточки?

sergeys
Автор

У нас в городе первая волна начиналась 13 июля 2020 года. А 4 октября главврач ЦРБ жаловалась, что у нас что-то много заболевших за последнюю неделю и они не понимают почему.

Tavda
Автор

Елена - а вы сильны сделать так, чтобы кнопкой можно было бы менять число столбцов без перегрузки страницы? Просто хочу сделать так а знаний не хватает... а вас приятно да же слушать. Если поможете буду вынужден подписаться с колокольчиком

PS-tnmc
Автор

Херня! Написала что на чистом js а сама подключила библиотеку

drevitsky