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

Question

[Евгений]

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

В 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
		});
	});
});

Answer 1

[Евгений]

Нашел решение! Для этого надо подключить функцию "линейку":

Masonry.prototype._getMeasurement = function(measurement, size) {
	var option = this.options[measurement];
	var elem;
	if (!option) {
		this[measurement] = 0;
	} else if (typeof option === 'function') {
		this[measurement] = option.call(this);
	} else {
		if (typeof option === 'string') {
			elem = this.element.querySelector(option);
		} else if (isElement(option)) {
			elem = option;
		}
		this[measurement] = elem ? getSize(elem)[size] : option;
	}
};