Equalize The Heights Of Any Group Of Elements - jQuery equal-heights

A small and configurable jQuery equal height plugin that gives you the ability to equalize the heights of any group of elements for modern web layout design.

By default, the plugin equalizes the height of columns within the same row every time you resize, reload the window, and even load new images.

Works perfectly with any front-end frameworks such as Bootstrap 4, Bootstrap 3, etc.

How to use it:

1. Add both jQuery JavaScript library and the jquery.equal-heights.js script to the page.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="src/jquery.equal-heights.js"></script>

2. Just call the function equalHeights on the desired elements. Done.

<div class="row">
  <div class="card">
    Item 1
  </div>
  <div class="card">
    Item 2
  </div>
  <div class="card">
    Item 3
  </div>
</div>

$('.card').equalHeights();

3. Add extra height to the elements. Default: 0.

$('.card').equalHeights({
  extraHeight: 15
});

4. Decide whether to use outer height instead. Default: false.

$('.card').equalHeights({
  useOuterHeight: true
});

5. Equalize the height only once. Default: false.

$('.card').equalHeights({
  callOnce: true
});

6. Specify the image selector where you want to listen for the image loaded event and update the height when the image is loaded.

$('.card').equalHeights({
  imageSelector: null
});

7. Callback functions.

$('.card').equalHeights({
  doProcessing: function(){
    // fired before update
  },
  processed: function(){
    // fired after updated
  },
});

8. Re-eualize the height manually.

var instance = $('.card').equalHeights();
instance.process();

Changelog:

2019-04-03

• Change let to var to avoid minification issues

2019-04-03

• Allow to add and remove elements after initialization

---

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