Isotope Grid Mode

isotope.grid-mode.js

/*!
 * grid layout mode for Isotope
 * based on cellsByRows layout
 */
( function( window ) {

	'use strict';

	function GridDefinition( LayoutMode ) {

		var Grid = LayoutMode.create( 'grid' );
		
		Grid.prototype.getRowHeight = function() {
			var rowHeights = [];
			var containerWidth = this.isotope.size.innerWidth;
			var runningWidth = 0;
			var currentRow = 0;
			for (var i = 0; i < this.isotope.filteredItems.length; i++) {
				this.isotope.filteredItems[i].element.style.height = '';
				this.isotope.filteredItems[i].element.style.left = '0';
				this.isotope.filteredItems[i].getSize();
				var width  = this.isotope.filteredItems[i].size.outerWidth;
				var height = this.isotope.filteredItems[i].size.outerHeight;
				
				// Save left & row
				this.isotope.filteredItems[i].element.x   = (runningWidth > containerWidth) ? 0 : runningWidth;
				this.isotope.filteredItems[i].element.row = (runningWidth > containerWidth) ? 0 : currentRow;
				
				runningWidth += width;
				if (runningWidth >= containerWidth) {
					currentRow++;
					runningWidth = 0;
				}
				
				if (!rowHeights[currentRow]) rowHeights[currentRow] = 0;
				rowHeights[currentRow] = Math.max(rowHeights[currentRow], height);
			};
			this.rowHeight = rowHeights;
		};
		
		Grid.prototype._resetLayout = function() {
			this.getRowHeight();
		};

		Grid.prototype._getItemLayoutPosition = function( item ) {
			item.getSize();
			var row = item.element.row;
			var x   = item.element.x;
			var y   = 0;
			for (var i = 0; i < row; i++) {
				y += this.rowHeight[i];
			};
			item.element.style.height = this.rowHeight[row] + 'px';
			return {
				x: x,
				y: y
			};
		};

		Grid.prototype._getContainerSize = function() {
			var totalHeight = 0;
			for (var i = 0; i < this.rowHeight.length; i++) {
				totalHeight += this.rowHeight[i];
			};
			return {
				height: totalHeight
			};
		};

		return Grid;

	}

	if ( typeof define === 'function' && define.amd ) {
		define( [ 'isotope/js/layout-mode' ], GridDefinition );
	} else {
		GridDefinition( window.Isotope.LayoutMode );
	}

})( window );