Simple jQuery Plugin for Dynamic Grid Layout - Grid.js
File Size: | 8.62KB |
---|---|
Views Total: | 2222 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Grid.js is a lightweight and fast jquery plugin that allows you to easily create a Dynamic Grid Layout for your website. The elements in the grid will be automatically arranged when the size of window is changed.
How to use it:
1. Include jQuery library and Grid.js
<script src='http://code.jquery.com/jquery-1.9.1.min.js'></script> <script src='jquery.grid.js'></script>
2. Markup
<ul id="grid"> </ul>
3. Call the plugin with options
<script> var createGrid = (function() { var i = 80; while (--i) { var li = document.createElement('li'), w = 96 * (parseInt(Math.random() * 2) + 1) - 12, h = 60 * (parseInt(Math.random() * 5) + 1); li.innerHTML = i; li.className = 'item'; $(li).css({ width: w, height: h, lineHeight: h + 'px' }).appendTo('#grid'); } })(); $('#grid').grid({animate: true}); </script>
3. DONE
This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.