Minimal jQuery Grid Layout Plugin - Cool Grid
File Size: | Unknown |
---|---|
Views Total: | 2152 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Cool Grid is a simple and lightweight jQuery layout plugin that automatically resizes the layout elements by calculating each item's height.
How to use it:
1. Include jQuery library and jQuery Cool Grid on the web page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="jquery.coolgrid.js"></script>
2. Markup html structure
<section> <ul class="items"> <li class="item"><img src="./images/noimage1.png" /> <div>noimage1</div> </li> <li class="item"><img src="./images/noimage2.png" /> <div>noimage2</div> </li> <li class="item"><img src="./images/noimage3.png" /> <div>noimage3</div> </li> ... </ul> </section>
3. The CSS for this example
<style> ul, li { margin: 0; padding: 0; list-style: none; } .items { position: relative; margin: 0 auto; display: block; width: 650px; } .item { border: 1px solid #dedede; margin: 10px 0; } .item img { display: block; width: 180px; height: auto; padding: 10px; } </style>
4. The javascript
<script> $(window).load(function(){ options = { autoResize: true, container: $('.items'), offset: 5, item_width: 210 } $('.item').CoolGrid(options); }); </script>
This awesome jQuery plugin is developed by nakajijapan. For more Advanced Usages, please check the demo page or visit the official website.