1. INCLUDE JS FILES
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="./jquery.matchHeight.js"></script>
2. HTML
<div class="items-container">
<div class="item item-0">
<h2>Lorem ipsum</h2>
<p>Phasellus ut nibh fermentum, vulputate urna vel, semper diam.</p>
<p>Aenean semper felis ipsum, vulputate consequat dui elementum vel.</p>
</div>
<div class="item item-1">
<h3>Lorem ipsum dolor</h3>
<p>Phasellus ut nibh fermentum, vulputate urna vel, semper diam. Nunc sollicitudin felis ut pellentesque fermentum. In erat mi, pulvinar sit amet tincidunt vitae, gravida id felis. Phasellus hendrerit erat sed porta imperdiet. Vivamus viverra ipsum tortor, et congue mauris porttitor ut.</p>
</div>
<div class="item item-2">
<h4>Lorem ipsum dolor sit amet.</h4>
<p>Aenean semper felis ipsum, vulputate consequat dui elementum vel. Nullam odio eros, sagittis vitae lectus id, pretium viverra lectus. Etiam auctor dolor non dui ultricies pulvinar.</p>
</div>
<div class="item item-3">
<h3>Lorem ipsum dolor</h3>
<p>Aenean semper.</p>
</div>
<div class="item item-4">
<h3>Lorem ipsum dolor</h3>
<p>Phasellus ut nibh fermentum, vulputate urna vel, semper diam. Nunc sollicitudin felis ut pellentesque fermentum. In erat mi, pulvinar sit amet tincidunt vitae, gravida id felis.</p>
</div>
<div class="item item-5">
<h3>Lorem ipsum dolor</h3>
<p>Aenean semper felis ipsum, vulputate consequat dui elementum vel.</p>
</div>
<div class="item item-6">
<h3>Lorem ipsum dolor</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
<div class="item item-7">
<h3>Lorem ipsum dolor</h3>
<p>Phasellus ut nibh fermentum, vulputate urna vel, semper diam.</p>
</div>
<div class="item item-8">
<img src="http://placehold.it/800x150/fafafa/666" alt="a test image">
</div>
<div class="item item-9">
<img src="http://placehold.it/800x180/fafafa/666" alt="a test image">
</div>
<div class="item item-10">
<img src="http://placehold.it/800x200/fafafa/666" alt="a test image">
</div>
<div class="item item-11">
<img src="http://placehold.it/800x220/fafafa/666" alt="a test image">
</div>
</div>
3. JAVASCRIPT
$(function() {
$('.item').matchHeight();
});
4. ADVANCED
$(elements).matchHeight(byRow);
Where byRow is a boolean that enables or disables row detection, default is true.
You should apply this on the DOM ready event.
Data API
Use the data attribute data-match-height="group-name" (or data-mh shorthand) where group-name is an arbitrary string to denote which elements should be considered as a group.
All elements with the same group name will be set to the same height when the page is loaded, regardless of their position in the DOM, without any extra code required.
Note that byRow will be enabled when using the data API, if you don't want this then use the above method.
Removing
It is possible to remove any matchHeight bindings for a given set of elements like so
$('.item').matchHeight('remove');
Orthers
There are a few internal properties and functions you should know about:
$.fn.matchHeight._groups
The array that contains all element groups that have had matchHeight applied. Used for automatically updating on resize events.
Search and modify this array if you need to remove any groups or elements, for example if you're deleting elements.
$.fn.matchHeight._update()
If you need to manually trigger an update of all currently set equal heights groups, for example if you've modified some content.
$.fn.matchHeight._apply(elements, byRow)
Use the apply function directly if you wish to avoid the automatic update functionality.
$.fn.matchHeight._throttle = 80;
By default, the _update method is throttled to execute at a maximum rate of once every 80ms. Decreasing the above _throttle property will update your layout quicker, appearing smoother during resize, at the expense of performance. If you experience lagging or freezing during resize, you should increase the _throttle property.
JS Tutorial
