Lightweight jQuery Grid Layout Plugin 

Lightweight jQuery Grid Layout Plugin


This article is about Lightweight jQuery Pinterest like Fluid Grid Layout Plugin.

Features of Grid Layout Plugin

  • Fully responsive and customizable via Javascript and CSS3.
  • Ultra-lightweight. Only 3kb minified.
  • Grid schemes via javascript.

1. JQuery Babylon Grid plugin.

<link rel="stylesheet" href="jquery.babylongrid.css">
<script src="jquery.min.js"></script>
<script src="jquery.babylongrid.min.js"></script>

2. Create the Html for a grid layout.

<div id="babylongrid">

<article>
<div class="h3 title"> Title 1 </div>
<div class="desc"> Description 1 </div>
</article>

<article>
<div class="h3 title"> Title 2 </div>
<div class="desc"> Description 2 </div>
</article>

<article>
<div class="h3 title"> Title 3 </div>
<div class="desc"> Description 3 </div>
</article>

</div>

3. Initialize the grid layout with default settings.

$('#babylongrid').babylongrid();

4. Parameters to customize the layout.

$('#babylongrid').babylongrid({

// specify the number of columns for different screens
scheme: [
{
minWidth: 960,
columns: 4
},
{
minWidth: 720,
columns: 3
},
{
minWidth: 550,
columns: 2
},
{
minWidth: 0,
columns: 1
}
],

// 'tower' or 'city'
display: null,

// moves the first article to the last column
firstToRight: false,

// height divisor
heightDivisor: 25,

// callback
afterRender: null

});

5. Dynamically adds more content

// This should be done in AJAX callback
$(‘#babylongrid’).append(‘<article>New Item Here</atricle>’);

// trigger event to load new article to grid
// This should also be done in AJAX callback right after new elements are added to DOM
$(‘#babylongrid’).trigger(‘babylongrid:load’);

// or
$(‘#babylongrid’).trigger(‘babylongrid:reload’);

Leave a Reply

Your email address will not be published. Required fields are marked *