Equal Heights

jQuery Column of equal heights

by B L Praveen

HTML

<ul class="eqme">
  <li><h1>One</h1></li>
  <li><h2>Two</h2></li>
  <li><h3>Three</h3></li>
  <li><h4>Four</h4></li>
  <li><h5>Five</h5></li>
  <li><h6>Six</h6></li>
  <li><h1>One</h1></li>
  <li><h2>Two</h2></li>
  <li><h3>Three</h3></li>
  <li><h4>Four</h4></li>
  <li><h5>Five</h5></li>
  <li><h6>Six</h6></li>
</ul>

CSS

.eqme li{
  border:1px solid black;
  width:100px;
  float:left;
  margin:0;
  padding:0;
}

JavaScript

$.fn.extend({
	equalHeights: function(){
		var top=0;
		var row=[];
		var classname=('equalHeights'+Math.random()).replace('.','');
		$(this).each(function(){
			var thistop=$(this).offset().top;
			if (thistop>top) {
				$('.'+classname).removeClass(classname); 
				top=thistop;
			}
			$(this).addClass(classname);
			$(this).height('auto');
			var h=(Math.max.apply(null, $('.'+classname).map(function(){ return $(this).outerHeight(); }).get()));
			$('.'+classname).height(h);
		}).removeClass(classname); 
	}	   
});

$(function(){
  $(window).resize(function(){
    $('.eqme li').equalHeights();
  }).trigger('resize');
});