jQuery MagicHeight Plugin

Getting Started

1.1. Installation with Package Managers

bower install magic-height

npm install magic-height

1.2. The Basics

Include the jQuery library and plugin:

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="dist/jquery.magic-height.min.js"></script>

Html markup:

<div class="container js-demo-container">
  <div class="row">
    <div class="col-xs-12 js-demo-item">your content or markup</div>
    <div class="col-xs-12 js-demo-item">your content or markup</div>
    <div class="col-xs-12 js-demo-item">your content or markup</div>
    <div class="col-xs-12 js-demo-item">your content or markup</div>
    <div class="col-xs-12 js-demo-item">your content or markup</div>
  </div>
</div>

Start plugin:

$(function () {
    $('.js-demo-container').magicHeight({
      itemClass: '.js-demo-item'
    });
});

Options

itemClass

Item class value
Default: '.item'
Type: string

line

Elements count in line
Default: 'auto'
Type: string | integer

resize

Recalculate height of elements while loading a window
Default: true
Type: boolean

load

Recalculate height of elements while changing window size
Default: true
Type: boolean

Demo

https://kyrare.github.io/magic-height/