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

preview_player
Показать описание
Поговорим о сетках masonry, существующих решениях и разберем мой разработанный пример masonry галереи c ровным окончанием.
🏰 Английский YouTube: @webelart_en

00:00 введение.
00:40 задача masonry, способы решения.
03:29 masonry в прямоугольнике, NP-полная задача.
04:58 мой алгоритм для задачи masonry.
06:36 пример галереи в браузере.
07:24 разбираем html.
10:24 разбираем css страницы.
11:30 разбираем javascript masonry.
12:30 разбираем css masonry.
15:06 разбираем алгоритм masonry.
31:14 заключение.

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

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

Адаптивная masonry сетка 0:35:53

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

Responsive Masonry Image 0:05:06

Responsive Masonry Image Gallery Using Pure HTML & CSS Only

Pinterest layout style 0:08:10

Pinterest layout style with CSS | CSS Only Masonry grid

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

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

Build A Masonry 0:07:36

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

Pure CSS Responsive 0:05:36

Pure CSS Responsive Masonry Grid Layouts

CSS und JavaScript 0:39:13

CSS und JavaScript Tutorial | Masonry Layout

Masonry layout with 0:16:56

Masonry layout with CSS only!

Pages Gallery masonry 0:00:43

Pages Gallery masonry

Material UI Tutorial 0:05:15

Material UI Tutorial #18 - React Masonry CSS (masonry layout)

Image Gallery | 0:03:38

Image Gallery | CSS | Masonry | ReactJS

Learn Masonry JS 0:05:01

Learn Masonry JS in 5 Minutes

CSS Tips & 0:03:14

CSS Tips & Tricks: Creating a Masonry Grid Layout with Pure CSS, No JavaScript Required

Front End UI 0:03:40

Front End UI Elements | Tailwind CSS - Responsive Masonry Grid

Галерея на чистом 0:01:00

Галерея на чистом JS за 20 минут

How to create 0:08:21

How to create an asymmetric masonry layout using CodyHouse UI

ГАЛЕРЕЯ ДЛЯ САЙТА 0:03:06

ГАЛЕРЕЯ ДЛЯ САЙТА ЗА 1 МИНУТУ ⭐ lightGallery

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

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

Responsive MASONRY GRID 0:12:48

Responsive MASONRY GRID with FILTER and animations. HTML CSS JAVASCRIPT

Галерея Pinterest 0:16:13

Галерея Pinterest

Pure CSS Masonry 0:07:16

Pure CSS Masonry Layout/Waterfall Layout

How To Design 0:13:17

How To Design A Masonry Gallery For Your Blogger Website - Live Blogger

jQuery Masonry Eklentisi 0:05:24

jQuery Masonry Eklentisi Kullanımı

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

Лена, спасибо за Вашу помощь. Просмотрел Ваш замечания, разобрался, все заработало. Спасибо за Ваш труд!!! С праздником 8 Марта Вас!!!

ЮрийЖелтухин
Автор

Спасибо за труд. Очень нравится подача материала. Выбранные темы очень полезны. Приятно смотреть, а главное слушать. Продолжайте в том же духе. Успехов и жду продолжения.

ZolotarevPavel
Автор

Елена привет из сибири! вы потрясающая! спасибо за такую находку алгоритмам ютуба! два дня писал нечто похожее и спустя двое суток выпало ваше видео... пришлось подписаться может еще чего найду)

Автор

Очень интересно и познавательно слушать, спасибо. Познавательно услышать было о разных вариантах решения задачи.

deniskotov
Автор

Спасибо Леночка за урок. Интересный метод !

Elenka
Автор

Благодарю за видео! Очень интересная и хорошая подача материала. Желаю Вам реализовать вашу мечту в 100к подписчиков.👋

АлександрАфанякин
Автор

А как совместить сетку masonry с lazy loading ?

ayub-a
Автор

Спасибо, за видео 🙂 У меня получилось. Есть вопрос только по адаптации галереи с Masonry к мобильным устройствам . Не подскажите, как лучше её сделать? Еще раз спасибо!

mikhanata
Автор

Чем плох img с object-position и object-fit? К чему пляски с background-image?

enotus_chang
Автор

У меня к сожалению не заработала. Браузер не находит не одной ошибки, но картинки просто не показываются.

ЮрийЖелтухин