Equal Height Columns In JavaScript – equalizer.js

Preview:

Description:

Just another JavaScript plugin that makes all the columns have the same height depending on the tallest one. Works perfectly with window resize event.

How to use it:

Insert the JavaScript file ‘equalizer.js’ into the document.

<script src="equalizer.js"></script>

Initialize the equalizer.js library on document ready.

window.addEventListener('load', function() {
  Equalizer.init();
});

Insert your own columns to rows as follows:

<div class="demo" data-equalizer-row="demo">
  <div data-equalizer="demo">
    Column 1
  </div>
  <div data-equalizer="demo">
    Column 1
  </div>
  <div data-equalizer="demo">
    Column 3
  </div>
</div>

That’s it. You can also enable/disable the equal height functionality on specific devices:

<div class="demo" data-equalizer-row="demo" data-equalizer-on="medium,xlarge">
  <div data-equalizer="demo">
    Column 1
  </div>
  <div data-equalizer="demo">
    Column 1
  </div>
  <div data-equalizer="demo">
    Column 3
  </div>
</div>

The default breakpoints.

Equalizer.init({
  breakpoints: {
    small: 480,
    medium: 768,
    large: 1024,
    xlarge: 1200
  }
});