Flexible & Responsive jQuery Grid Layout Plugin - vGrid

File Size: 27.5KB
Views Total: 3711
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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:

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.