masonryでアイテムの高さを揃える方法

可変グリッドレイアウトのMansoryで要素の高さをそろえる方法です。

Masonryはこんな感じ。

function() {
			var $container = $('#masonry-container');
			$container.imagesLoaded(function() {
				$('.masonry').isotope({
					itemSelector: '.item',
					masonry: {
						columnWidth: '.item',
						gutter: 30,
						isFitWidth: true,
						animate: true,
						animationOptions: {
							duration: 700,
							queue: true
						}
					}
				});
			});
		}

要素の高さを揃えます。

;( function( $, window, document, undefined )
{
	'use strict';

	var $list		= $( '.masonry' ),
		$items		= $list.find( '.item' ),
		setHeights	= function()
	    {
			$items.css( 'height', 'auto' );

			var perRow = Math.floor( $list.width() / $items.width() );
			if( perRow == null || perRow < 2 ) return true;

			for( var i = 0, j = $items.length; i < j; i += perRow )
			{
				var maxHeight	= 0,
					$row		= $items.slice( i, i + perRow );

				$row.each( function()
				{
					var itemHeight = parseInt( $( this ).outerHeight() );
					if ( itemHeight > maxHeight ) maxHeight = itemHeight;
				});
				$row.css( 'height', maxHeight );
			}
		};

	
	setHeights();
	$( window ).on( 'resize', setHeights );
	$list.find( 'img' ).on( 'load', setHeights );

	
})( jQuery, window, document );

参考

Responsive Equal Height Blocks by Osvaldas Valutis

Update: after publishing this post I received some useful feedback from the comm...