Pure JavaScript Library For Equal Height Block Elements – AlignJS

Preview:

Description:

AlignJS is a pure JavaScript library for aligning the heights of a set of elements to help make a neat, clean web layout.

Features:

• Works with responsive grid layout.
• Takes CSS3 box-sizing into account.
• Customizable.

How to use it:

Include the JavaScript file Align.js on your webpage where needed.

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

Initialize the AlighJS.

var container = document.querySelector('.container');
var align = new Align(container,{
    targetClass: 'item',
    threshold: 1
});

Customization options.

// the class of the items you want to size
targetClass:'item',
// determines the minimum size of which an element must be in order to be sized relative to the larger adjacent element.
threshold: 1,
// executed before the elements are sized
beforeRun:function(){},
// executed after the elements are sized
afterRun:function(){}

API methods.

// updates an instance of AlignJS.
align.update(); 
// removes an instance of AlignJS.
align.destroy();