Friday, July 10FreeJQuery

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">

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

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

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


3. Initialize the grid layout with default settings.


4. Parameters to customize the layout.


// 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

// or

Leave a Reply

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