Create Responsive Equal Height Columns with jQuery - conformity

An extra lightweight jQuery plugin for making all columns equal in height per row that works perfectly with responsive/fluid web layout. The major difference between conformity and the other equal height solution is that the plugin equalizes the height of elements in a row rather than all elements in a group.

See also:

• jQuery Plugin For Equalizing The Height of Your Elements - Equal Height Columns
• Equal Height Columns Using jQuery Sameheight Responsive Plugin
• jQuery Plugin for Equalizing The Height or Width of Your Elements - equalize.js
• Minimalist jQuery Responsive Equal Height Grid Layout - Javascript Grids
• jQuery Plugin For Responsive Equal Height Containers
• Responsive jQuery Equal Height Photo Gallery Plugin - Pycs Layout

How to use it:

1. Insert a set of Html elements into a container as follows.

<div class="widgets">

  <div class="widget">
    ...
  </div>

  <div class="widget">
    ...
  </div>

  <div class="widget">
    ...
  </div>

  ...

</div>

2. Load the JQuery library and the JQuery conformity.js script at the end of your document.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="dist/conformity.js"></script>

3. Call the plugin on the children elements and done.

$(document).ready(function () {

  // Initialize the plugin
  $('.widget').conformity();

  // re-initialize the plugin on window resize
  $(window).on("resize", function() {
    $('.widget').conformity();
  });

});

4. Add your own CSS styles to the elements.

.widgets {
  ...
}

.widget {
  ...
}

.widget:nth-child(even) {
  ...
}

---

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