/ Сайтостроение / Дизайн / Галерея изображений Masonry

Галерея изображений Masonry

HIT

20.10.2015

3468

Masonry — это принцип построения изображений (блоков) занимая все пространство, по аналогии со строительной кладкой.

Галерея изображений Masonry jquery

Вставляем изображения в общий div с классом grid, каждое изображение в div с классом grid-item, либо grid-item grid-item—width2 для бОльшего размера

<div class="grid">

<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>

</div>

CSS

/* Галерея Masonry */
.grid-item {width: 200px; height: 200px; overflow: hidden;}
	
.grid-item--width2 { width: 400px; height: 200px;}
.grid-item--height2 { height: 400px; width: 200px;}

.grid-item img {
    height: 100% !important;
    width: auto !important;
    max-width: none !important;
    transition: transform 3s;
    -webkit-transition: transform 2.0s ease 0s;
}

.grid-item--width2 img {height: auto !important; width: 100% !important;}
.grid-item--height2 img {height: 100% !important; width: auto !important;}

.grid-item img:hover {transform: translateX(-100px);}

.grid-item--width2 img:hover {transform: scale(1.4);}
.grid-item--height2 img:hover {transform: scale(1.2) rotate(5deg);}

Подключаем основной скрипт

<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script> - удаленно <script type="text/javascript" src="/wp-content/themes/tester/js/masonry.pkgd.min.js"></script> - на своём сервере

Подключаем дополнительный (настраиваемый) скрипт

Единственный недостаток такой галереи — некорректно растягивается в %

Как сделать растягивание плитки в процентном соотношении — описано в статье Галерея Masonry в процентах.

Пример работы скрипта:

nastol.com.ua-105348
luxfon.com-20974
celeber.ru
look.com.ua-74716
5b2dfda3ee1c-
1324449056-215406-000067_www.nevseoboi.com.ua
rachel_mcadams
h60P9tuFg9gA_1988463_XL
reWalls.com-66550
VJnzvftXp2U
134438
126027
1347122610-398112-0178740_www.nevseoboi.com.ua
big_ba9b43a36a8af53a46a0d44068250d0c82490c4c2
1281550251_1
134485
Devushka750
1414461247145
reWalls.com-13271
1160
692269789
artleo.com-101353
описание слайда №1
Carla-and-Melissa-Howe-3
kareglazaya-dekolte-solnechnyy
1920x1200_nezhnaya-krasotka-v-chulkah

Тэги: ,

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Блочная верстка сайта

Блочная верстка сайта

Сайт должен верстаться по сетке блоками. При использовании сетки разметка сайта выглядит гармонично. Предлагаю свой простой вариант верстки блоков. Для добавления блоков, используйте тэги <div class="box"> <div class="block-1">Содержимое</div> — ширина Читать далее »

Первая последняя записи в ряду

Первая последняя записи в ряду

Добавляем классы для первых и последних записей в ряду. Вариант 1: Глобально, в файле функций Вставляем в файл functions.php. В данном примере разделение по 4 записи в ряду. add_filter('post_class', 'dobavit_pervii_klass'); Читать далее »

Одинаковая высота блоков

Одинаковая высота блоков

Одинаковая высота блоков является насущной проблемой при разработке дизайна сайта, средствами css это делать не удобно, т.к. требует специальной верстки. Отлично с данной задачей справляется jQuery. Скрипт EqualHeight Скрипт для Читать далее »

Добавить комментарий

Пока нет комментариев. Будь первым!

Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry Галерея изображений Masonry
Иерархия по бренду
Рекомендации для васИерархия по брендуOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.