Мозайка изображений или контента

Установка:

Подключаем библиотеку jQuery, плагин jQuery Mosaic и его стиль:

HTML код выглядет следующим образом:

<!-- изображения -->
<div id="myMosaic1">
	<img border="0" src="1.jpg" width="300" height="168" />
	<img border="0" src="2.jpg" width="400" height="192" />
	<img border="0" src="3.jpg" width="660" height="660" />
	<!-- ... -->
	<img border="0" src="20.jpg" width="400" height="400" />	
</div>
<!-- блоки -->
<div id="myMosaic2">
	<div width="449" height="305" style="background-color: #80AC28;">1</div>
	<div width="349" height="283" style="background-color: #903D03;">2</div>
	<div width="407" height="187" style="background-color: #A065BB;">3</div>
	<!-- ... -->
	<div width="318" height="283" style="background-color: #7B8FB4;">30</div>
</div>
<!-- подключение плагина -->
<script>
	$(function() {		
		$('#myMosaic1').Mosaic({			
			maxRowHeight: 140,
			maxRowHeightPolicy: 'tail' 
		});	
		$('#myMosaic2').Mosaic({			
			maxRowHeight: 100,
			maxRowHeightPolicy: 'tail' 
		});	
	});
</script>

</div>

</div>

$(function() {

$('#myMosaic1').Mosaic({

maxRowHeight: 140,

maxRowHeightPolicy: 'tail'

});

$('#myMosaic2').Mosaic({

maxRowHeight: 100,

maxRowHeightPolicy: 'tail'

});

</script>

Настройки по умолчанию:

maxRowHeight	400	Максимальная высота рядов.
refitOnResize	true	Восстановление мозайки при изменении размера окна.
refitOnResizeDelay	false	Миллисекунды после изменения размера окна, чтобы переделать мозаику. Оставьте это false, чтобы обновлять мозаику в реальном времени.
defaultAspectRatio	1	Соотношение сторон фото или блоков, когда ни один не указан или не может быть рассчитан.
maxRowHeightPolicy	skip	Варианты показа оставшихся блоков. skip - не показывать элементы, которые не уместились crop - последнии элементы не сохраняют свои пропорции и растягиваются по ширине с высотой maxRowHeight oversize - оставшиеся элементы превышают заданную высоту maxRowHeight tail - последняя строка заполняется не полностью
highResImagesWidthThreshold	350	Ширина элемента, на котором следует использовать изображение с высоким разрешением вместо обычного. Изображения с высоким разрешением задаются с помощью свойств элемента data-high-res-image-src или data-high-res-background-image-url.
outerMargin	0	Отступ от края всей мозаики
innerGap	0	Расстояние между элементами

Демо для изображений:

Демо для блоков:

Возможные проблемы и их решения:

Оригинальный стиль для всего блока мозайки jQueryMosaic имеет свойство float: left; которое, на мой взгляд, является лишним и может смутить.

Если для изображений не заданы атрибуты width и height, Firefox (у меня) не может определить их значения и все фотографии отображаются через настройку defaultAspectRatio

Для решения этой проблемы нужно включить скрипт после загрузки страницы:

$(window).on('load', function () { 	
	$('#myMosaic1').Mosaic({			
		maxRowHeight: 140,
		maxRowHeightPolicy: 'tail' 
	});	
	$('#myMosaic2').Mosaic({			
		maxRowHeight: 100,
		maxRowHeightPolicy: 'tail' 
	});	
});

$(window).on('load', function () {

$('#myMosaic1').Mosaic({

maxRowHeight: 140,

maxRowHeightPolicy: 'tail'

});

$('#myMosaic2').Mosaic({

maxRowHeight: 100,

maxRowHeightPolicy: 'tail'

});

Данный скрипт имел конфликт с bootstrap.css (v3.3.4) на md-экране (col-md-8) - неправильный сбор мозайки.

Для решения этой проблемы внес малую корректировку в стиль bootstrap'a, добавив 2 пикселя к контейнеру:

@media (min-width:992px) { .container { width: 972px /* вместо 970 как было*/ } }

1
2
3
4
5

@media (min-width:992px) {
.container {
width: 972px /* вместо 970 как было*/
}
}

Более подробную информацию о данном плагине и примеры можно найти на сайте разработчика: jquery-mosaic.tin.cat

Установка:

Настройки по умолчанию:

Демо для изображений:

Демо для блоков:

Возможные проблемы и их решения:

Смотрите также:

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