equal-height.js

$.fn.equalheight = function( remove ) {

	// Reset heights from the last viewport resize so that values do not get wacky-large.
	this.height('auto');

	// if remove is true, just reset the heights and return
	if ( remove ) {
		return;
	}

	// if there are less then two elements, we don't need to do anything return
	if ( this.length < 2 ) {
		return;
	}

	var groups = {},
		group;

	// for each element, add the element to groups with the same top position and find the tallest height
	this.each(function () {

		var $this = $(this),

			top = $this.position().top,
			height = $this.outerHeight();

		// get the group with the same top position or create a new group object
		group = groups[top] || { height: 0, $elements: $this };

		// find the tallest height in the group
		if ( group.height < height ) {
			group.height = height;
		}

		// if the group already exists, add $this element
		if ( groups[top] ) {
			group.$elements = group.$elements.add( $this );

		// else if its a new group, add the group
		} else {
			groups[top] = group;
		}

	});

	// for each group, set their heights to the group height
	for ( group in groups ) {
		// this assumes all the elements have a box-sizing of border-box
		groups[group].$elements.css( 'height', groups[group].height + 'px' );
	}

};

$(window).load(function() {
	$('.equal-height').equalheight();
});


$(window).resize(function(){
	$('.equal-height').equalheight();
});