Задать вопрос

Masonry v3 — Как добавить функцию масштабирования картинок в зависимости от ширины контейнера?

Здравствуйте,

В Masonry 2-й версии, в параметре columnWidth, можно было напрямую вызывать любую объявленную функцию, но в 3-ей версии, видимо, эту возможность устранили. Ниже упомянутая функция, высчитывает оптимальное количество колонок и масштабирует картинки таким образом, что бы заполнялся весь контейнер, при этом, две картинки альбомной ориентации, были эквивалентны одной картинке книжного. Подскажите пожалуйста, как можно "заставить" эту функцию работать? :) Пример работы функции.

function getImageSize(containerWidth) {
	var numColumns = 0,
	spaceLeft = 0,
	ratio = 0,
	imageWidth = 278,
	imageHeight=186,
	itemMargin = 7,
	newImgW, w, h, row;
	numColumns = Math.floor(containerWidth / imageWidth);
	spaceLeft = containerWidth - numColumns * (imageWidth - itemMargin);
	if(spaceLeft > 0) {
		newImgW = 0;
		if(!(numColumns === 1 && imageWidth / 2 > spaceLeft)) {
			numColumns += 1;
		}
		newImgW = Math.floor(containerWidth / numColumns) - itemMargin;
		ratio = imageWidth / newImgW;
		var arrImgs = $('.thumb img');
		for(var i = 0; i < arrImgs.length; i++) {
			w = newImgW;
			arrImgs.eq(i).width(w);
			row = 0;
			newImgH = arrImgs.eq(i).height();
			row = newImgH > newImgW ? row = 2 : row = 1;
			h = (Math.floor(imageHeight / ratio) + itemMargin) * row - itemMargin;
			arrImgs.eq(i).height(h);
		}
	}
	return  newImgW + itemMargin;
}

$(window).load(function(){
	var $container = $('.gallery');
	$container.imagesLoaded(function() {
		$container.masonry({
			itemSelector: '.thumb',
			columnWidth: getImageSize
		});
	});
});
  • Вопрос задан
  • 2398 просмотров
Подписаться 2 Комментировать
Подписчики вопроса 2 К ответам на вопрос (0)