Responsive Equal Height Plugin with jQuery - ResponsibleHeight

ResponsibleHeight is a jQuery plugin that helps you create responsive, neat web layout with equal height grid items for your website. The plugin enables you to equalize all the height of elements in a row of a custom grid. It also allows to specify how many columns in a row depending on the viewport size as you resize the window.

How to use it:

1. Download the ResponsibleHeight plugin and include the responsible-height.js script after jQuery JavaScript library.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="responsible-height.js"></script>

2. Add grid items to the web layout as follow.

<main>
  <div class="item">
    <img src="1.jpg">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum sapien non orci molestie tempus. Aenean massa lacus, imperdiet vel libero luctus, porta luctus felis.</p>
    <a class="button">View More</a>
  </div>
  <div class="item">
    <img src="2.jpg">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum sapien non orci molestie tempus.</p>
    <a class="button">View More</a>
  </div>
  <div class="item">
    <img src="3.jpg">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    <a class="button">View More</a>
  </div>
  ...
</main>

3. Set the default of verbose to be true for all uses of responsible height.

$.fn.responsibleHeight.defaults.verbose = true;

4. Initialize the plugin.

$('.item').responsibleHeight({
  child:    'p',
  widths:   [
    [1300, 10],
    [1000, 8],
    [700, 4],
    [40, 2],
    [0, 1]
  ]
});

5. All default options.

$('.item').responsibleHeight({

  // setting true to ignore the widths option and set all elements (or their children) to the same height.
  global:     false,

  // Delay between resize of the screen and the recalculation of the required heights. 
  // This can be set to 0 and no delay will be calculated.
  delay:      200,

  // A multi dimensional array of pixel widths and columns starting from the heights to lowest. 
  // This checks if the size is greater than a size, if so it sets the columns.
  widths:     [],

  // Selector for the child element to be found inside the main selector. 
  // If this is set the height will be calculated and set to this element instead of the parent. 
  // However the parent will be used for calculating columns.
  child:      false,

  // Set this to true to log debugging information to console.
  verbose:    false,

  // Setting Exclude get with either a string or a jQuery selector will stop the elements with this selector from having their heights factor into the heights of the other elements in its row.
  exclude_get:  false,

  // Setting Exclude set with either a string or a jQuery selector will stop the element (or child element if specified) from having its height set.
  exclude_set:  false,

  // callbacks
  before_init:  null,
  after_init:   null,
  window_resize:  null,
  before_resize:  null,
  after_resize: null,
  after_destroy:  null
  
});

6. API methods.

// Destroy the plugin, remove heights and stop working on resize
$('.item').responsibleHeight('destroy')

// Reinitialize the plugin
$('.item').responsibleHeight('reinit')

// Immediately trigger a recalculation of the heights for all elements based off the existing settings
$('.item').responsibleHeight('refresh')

---

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