Галерея из плиток заполняющая всю ширину

Сделать галерею которая заполнит все пространство фотографиями разного размера можно с помощью jQuery плагина montage.js, также понадобится fancybox.

Подключение библиотек

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="/js/montage.js"></script>
<link rel="stylesheet" href="/js/fancybox/jquery.fancybox.min.css">
<script src="/js/fancybox/jquery.fancybox.min.js"></script>
HTML

Фото не нужно подгонять под один размер, для примера используется следующий набор изображений:

HTML разметка

<div class="am-container">
	<a data-fancybox="gallery" href="/img/space-1.jpg">
	   	<img src="/img/space-1.jpg" alt="">
	</a>
	<a data-fancybox="gallery" href="/img/space-2.jpg">
	   	<img src="/img/space-2.jpg" alt="">
	</a>
	<a data-fancybox="gallery" href="/img/space-3.jpg">
	   	<img src="/img/space-3.jpg" alt="">
	</a>
	...
</div>
HTML

Немного стилей

.am-wrapper{
	float:left;
	position:relative;
	overflow:hidden;
}
.am-wrapper img{
	position:absolute;
	outline:none;
}
CSS

Запуск плагина

$(function() {
	$('.am-container').montage({
		liquid: false, 
		fillLastRow: true,
		margin: 4,
		fixedHeight: 160
	});
});		
JS

Результат

// Если true, то добавляется overflow-y к <body>.
liquid: false,

// Расстояние между изображениями.
margin: 1,

// Минимальная ширина изображения.
minw: 70,	

// Минимальная высота изображения.
minh: 20,	

// Максимальная высота изображения.
maxh: 250,	

// Чередование высот у строк.
alternateHeight: false,

// Случайная высота от min до max.
alternateHeightRange: {
	min: 100,
	max: 300
},

// Фиксированная высота для всех изображений.
fixedHeight: null,	

// Если true, то не учитываются minw, minh.
// Высота берется по самому маленькому изображению.
minsize: false,

// Если не будет хватать изображений для полного заполнения, 
// растянет последнее изображение на всю ширину.
fillLastRow: false
JS
04.04.2019 , обновлено 17.01.2020

Комментарии

, чтобы добавить комментарий.

Другие публикации

Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
12.12.2019 907
BxSlider отличный jquery плагин слайдеров и каруселей, адаптивный, легко настраивается, поддерживает любой тип...
13.02.2020 45
Сборник советов как поднять оценку в PageSpeed Insights.
04.04.2019 2461
Сборник примеров установки меток на карту по координатам и адресу, изменение их вида и вывод балунов.
24.07.2018 8305
Представленный код позволяет c помощью jQuery зафиксировать шапку таблицы при прокрутке страницы. Скрипт поддерживает...
03.12.2016 10783
В статье представлены все самые встречающеюся мета-теги с примерами и пояснениями их использования.
17.01.2018 3551