Fast Responsive Equal Height Plugin - jQuery Same Height

Same Height is a responsive, and blazing fast jQuery equal height plugin that works with CSS column-count Property and image loaded event.

This plugin sets all the matched elements' height to the highest one, waiting for images in them to have their height setted (i.e. when they're loaded).

It helps web developers equalize the heights of grid items within the same row and create a tidy responsive grid layout for web & mobile design.

How to use it:

1. Load the jquery.sameheight.js after loading jQuery JavaScript library.

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

2. You might need to load the CSS-Element-Queries polyfill for lagacy browsers.

<script src="https://cdnjs.cloudflare.com/ajax/libs/css-element-queries/1.0.2/ResizeSensor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/css-element-queries/1.0.2/ElementQueries.js"></script>

3. Call the function sameHeight on the grid items and done.

<div class="myLayout">
  <div class="item">
    <div class="box">
      Item 1
    </div>
  </div>
  <div class="item">
    <div class="box">
      Item 2
    </div>
  </div>
  <div class="item">
    <div class="box">
      Item 3
    </div>
  </div>
  ...
</div>

$(function(){

  $('.box').sameHeight();

});

4. Set the debounce in milliseconds (Default: 250).

$('.box').sameHeight({
  debounce: 0
});

5. Decide whether to apply the equal height functionality to items in different rows.

$('.box').sameHeight({
  compact: true // default: false
});

6. Decide whether to enable the equal height functionality on the responsive layout.

$('.box').sameHeight({
  responsive: false // default: true
});

7. Set the target element to observe the height.

$('.box').sameHeight({
  target: null
});

8. Set the target element where you want to observe the resize event.

$('.box').sameHeight({
  observe: window // DOM element/CSS query
});

---

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