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

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 в процентах.

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

Поделиться в соц. сетях: