Jquery Equal Height plugin

by ian_smithz

HTML

<div class="one row">

  <div class="product">Lorem ipsum dolor sit amet asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd sad asd asd asd ads sad </div>
  <div class="product blue">Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</div>
  <div class="product">Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</div>
  <div class="product blue">Lorem </div>

</div>

<p>

</p>

<div class="two row">

  <div class="product">Lorem ipsum dolor sit amet</div>
  <div class="product blue">Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</div>
  <div class="product">Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</div>
  <div class="product blue">Lorem </div>

</div>

CSS

.row {
  clear: both
}

.row>div {
  width: 25%;
  float: left;
}

.product {
  background-color: red;
}

.blue {
  background-color: blue;
}

JavaScript

$.fn.equalHeight = function() {
  var max_height = 0;
  $(this).each(function() {
    max_height = Math.max($(this).height(), max_height);
  });
  $(this).each(function() {
    $(this).height(max_height);
  });
};

$(document).ready(function() {
  $('.one .product').equalHeight();
  $('.two .product').equalHeight();
});