Flexible & Responsive jQuery Grid Layout Plugin - vGrid

vGrid is a jQuery plugin for creating responsive, flexible, dynamic, cross-browser and highly customizable grid layouts with ease. Helps you create any types of web layouts like pinterest style grid layout. 

Features:

• Auto rearranges grid items when window's size changed.
• Allows to sort grid items randomly or by filters.
• Supports drag and drop functionality.
• Start/finish events supported.
• Fade-in and easing effects supported.

More examples:

• Simple Example
• Basic Option Examplee
• Any Height Grid Example
• FadeIn Option Example
• Sort Example
• Dynamic Grid, Start/Finish Event Example
• Dynamic Image Grid, Start/Finish Event Example
• Multi Box Grid Example
• Grid Element Show/Hide Example
• Drag And Drop Sort Example

Basic Usage:

1. Load the jQuery javascript library and jQuery vGrid plugin in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.vgrid.min.js"></script>

2. Load the jQuery easing plugin in the page.(Optional)

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

3. Create the html for a simple grid layout.

<ul id="grid-content">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
...
</ul>

4. Initialize the grid layout with one JS call.

<script type="text/javascript">
$(function(){
$("#grid-content").vgrid();
});
</script>

5. Available Options.

<script type="text/javascript">
$(function(){
$("#grid-content").vgrid({
easing: "easeOutQuint",
time: 500,
delay: 20,
fadeIn: {
time: 300,
delay: 50
}
});
});
</script>

---

This awesome jQuery plugin is developed by xlune. For more Advanced Usages, please check the demo page or visit the official website.