Equal Height Layout With jQuery - equalheights.js

Yet another jQuery plugin for creaing a responsive, neat, equal height layout.

It finds the tallest element and applies its height to all other elements in the same row.

See How To Create Equal Height Columns for more details.

How to use it:

1. Load the minified version of the equalheights plugin after jQuery library (slim build is recommended).

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.equalheights.min.js"></script>

2. Apply the function equalHeights to any elements which should have the same height.

<ul>
  <li>Lorem dolor</li>
  <li>dolor sit amet</li>
  <li>consectetur adipiscing elit</li>
  <li>sed do eiusmod tempor incididunt</li>
  <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco Ut enim ad minim veniam, quis nostrud exercitation ullamco</li>
  <li>laboris nisi ut aliquip ex ea commodo consequat</li>
  <li>Duis aute irure dolor</li>
  <li>Excepteur sint</li>
</ul>

$(function(){
  $('li').equalHeights();
});

3. Determine whether to automatically re-init the plugin on window resize. Default: true.

$(function(){
  $('li').equalHeights({
    onResize: false
  });
});

4. Determine whether to automatically initialize the plugin on page load. Default: true.

$(function(){
  $('li').equalHeights({
    onLoad: false
  });
});

---

This awesome jQuery plugin is developed by status201. For more Advanced Usages, please check the demo page or visit the official website.