WebDesign Master
Курсы
Masonry — создание адаптивных плиток (jquery, masonry, imagesloaded, imagefill, bootstrap, vh)

Masonry — создание адаптивных плиток (jquery, masonry, imagesloaded, imagefill, bootstrap, vh)

Создадим адаптивную плитку изображений с использованием jQuery Masonry, ImageFill.js, ImagesLoaded и Bootstrap Grid.

Masonry — создание адаптивных плиток (jquery, masonry, imagesloaded, imagefill, bootstrap, vh) - Видеоурок
Смотреть урок на YouTube
Создание контентного сайта на Jekyll от А до Я

Архив данных для урока: Скачать

Использовали:

Masonry: https://masonry.desandro.com

ImageFill.js: https://johnpolacek.github.io/imagefill.js/

ImagesLoaded: desandro/imagesloaded

Masonry ImageLoaded Script:

var $container = $(".masonry-container");
$container.imagesLoaded(function () {
	$container.masonry({
		columnWidth: ".item",
		itemSelector: ".item"
	});
});

Премиум уроки от WebDesign Master

Курс по созданию сайта от А до Я на Jekyll

Создание сайта от А до Я. Комплексный курс

Курс по созданию интернет-магазина на OpenCart

Создание современного интернет-магазина от А до Я

Фриланс для начинающих

Я - фрилансер! Базовый курс для начинающих

Другие уроки по теме «Верстка»

  • Создание красивого сайта с горизонтальным Parallax эффектом | Материалы урока
  • Создание сайта портфолио с крутой анимацией | Материалы урока
  • Создание красивого сайта с Parallax эффектом при скролле | Материалы урока
  • Создание Parallax эффекта на сайте при движении мыши | Материалы урока
  • Создание красивого сайта с поддержкой темной темы (HTML, CSS, GSAP) | Материалы урока
  • Создание крутого 3D сайта с анимацией прокрутки | Материалы урока

Разделы сайта:

  • Курсы
  • Инструменты
  • Веб-дизайн
  • Вёрстка
  • CMS

Полезные ресурсы:

  • Установка WSL и окружения
  • Настройка окружения без WSL
  • Настройка VS Code
  • Lazy Load Placeholder
  • Документация Gulp 4
2023 © WebDesign Master