Equal Height Row: method for setting equal height for elements aligned in the same row

equalheightrows.js

/*
	equalHeightRows
	
	Provides a method for setting equal height for elements in the same row
	
	Requires jQuery
	
	Add class equalheightrow to elements that you want affected by this script
	
	On document ready run equalHeightRows.init(), optionally pass custom settings
	for example: equalHeightRows.init({refreshElems: true});

	To make it responsive, run equalHeightRows.exec() on window resize (use throtle)
	and breakpoint changes, optionally pass custom settings (apply only for that
	execution), for example: equalHeightRows.exec({refreshElems: true});
*/

var equalHeightRows: {

	settings: {
		refreshElems: false, // refreshed the list of elements on each run
		onlyVisible: true,   // ignores non visible elements
		checkPageLoad: true, // check if there was the page load event when waiting for images
	},

	vars: {},

	// init equalHeightRows
	// add an "loaderror" attribute to images that fail to load
	init : function(opts) {
		// replace default settings with passed options
		if(typeof opts == 'object') {
			jQuery.extend(true, equalHeightRows.settings, opts);
		}
		// get elements, check if we will ignore not visible elements
		if(equalHeightRows.settings.onlyVisible) {
			equalHeightRows.vars.elems = jQuery('.equalheightrow:visible'); 
		}
		else {
			equalHeightRows.vars.elems = jQuery('.equalheightrow');
		}
		// get images inside equal height rows elements
		equalHeightRows.vars.imgs = equalHeightRows.vars.elems.find('img');
		// add listener on page load
		equalHeightRows.vars.pageLoaded = false;
		jQuery(window).load(function(){
			equalHeightRows.vars.pageLoaded = true;
		});
		// run equal height rows
		equalHeightRows.exec();
	},

	// equalHeightRows
	// makes all elements in a row to be the same height
	exec : function(opts) {
		
		// get default settings and override with custom opts
		var s = equalHeightRows.settings;
		if(typeof opts == 'object') jQuery.extend(true, s, opts);
		
		if(s.refreshElems || typeof equalHeightRows.vars.elems == 'undefined') {
			if(equalHeightRows.settings.onlyVisible) {
				equalHeightRows.vars.elems = jQuery('.equalheightrow:visible'); 
			}
			else {
				equalHeightRows.vars.elems = jQuery('.equalheightrow');
			}
			equalHeightRows.vars.imgs = equalHeightRows.vars.elems.find('img');
		}
		
		var elemsCount = equalHeightRows.vars.elems.length;
		
		// first, revert all elements to auto height
		equalHeightRows.vars.elems.height('auto').promise().done(function(){
			// reset some vars
			var currElem,
				currElemTop = 0,
				currElemHeight = 0,
				currRowElems = new Array(),
				currRowTop = 0,
				currRowHeight = 0;
			
			// update heights per row
			equalHeightRows.vars.elems.each(function(i){
				
				// current element and its top
				currElem = jQuery(this);
				currElemTop = currElem.offset().top;
				currElemHeight = currElem.height();
				
				if(currElemTop != currRowTop) {
					// new row has started, set the height for the previous row if it has more than one element
					if(currRowElems.length > 1) {
						for(var j = 0; j < currRowElems.length; j++) {
							currRowElems[j].height(currRowHeight);
						}
					}
					// wipe out array of current row elems, start with current element
					currRowElems = new Array(currElem);
					// set the top of current row (gets again position of elem after adjusting previous row)
					currRowTop = currElem.offset().top;;
					// set the current tallest
					currRowHeight = currElemHeight;
				}
				else {
					// element in same row, add to array of elements
					currRowElems.push(currElem);
					// update the row height if new element is taller
					currRowHeight = (currElemHeight > currRowHeight) ? currElemHeight : currRowHeight;
					// if this is the last element in the set, update the last row elements height
					if(i == elemsCount - 1) {
						if(currRowElems.length > 1) {
							for(var j = 0; j < currRowElems.length; j++) {
								currRowElems[j].height(currRowHeight);
							}
						}
					}
				}
				
			}).promise().done(function(){
				// there may be images waiting to load, in that case wait a little and try again
				if(!(equalHeightRows.settings.checkPageLoad && equalHeightRows.vars.pageLoaded)) {
					equalHeightRows.vars.imgs.each(function(){
						// is the image still loading? (this.complete works only in IE)
						if(this.complete != true || (typeof this.naturalWidth !== "undefined" && this.naturalWidth === 0)) {
							// seems to still be loading
							// if there wasn't an error, run equalheightrows again in 0.25 secs
							if(typeof jQuery(this).attr('loaderror') != 'undefined'){
								// there isn't an error, it means the image has not completed loading yet
								setTimeout(function(){equalHeightRows.exec(opts)}, 250);
								
							}
						}
					});
				}
			});
		});
	}
};