Create A Pinterest-Like Dynamic Grid Using jQuery Gridify Plugin
File Size: | 400 KB |
---|---|
Views Total: | 7833 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Gridify is a minimal jQuery/YUI plugin used to create a Pinterest-like flexible and dynamic grid out with support of CSS3 animations and image loaded event. Also provides a standalone JS library which allows you to create the Pinterest-like grid layout with pure Javascript.
Related Plugins:
- Pinterest Like Glowing Input Fields with CSS3
- Yet Another Pinterest Like Layout Plugin For jQuery - waterfall
- Pinterest-Like Dynamic & Responsive Grid Layout Plugin - BlocksIt
- Pinterest-Like Dynamic Grid Layout Plugin with jQuery - Wookmark
- Pinterest-Like Web Layout Plugin
- Pinterest Style Dynamic Layout jQuery Plugin - Masonry
- Simple Pinterest Like Grid Layout Plugin - Pinbox
- Super Tiny Pinterest Dynamic Grid Layout Plugin with jQuery - Pubu
- Tiny Pinterest Like Image Grid Layout Plugin - Mosaic Flow
Basic Usage:
1. Include the jQuery library and the jQuery Gridify plugin at the bottom of your document.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="../gridify.js"></script>
2. Insert a group of images into your document.
<div class="grid"> <img src="1.jpg" width="250"> <img src="2.jpg" width="250"> <img src="3.jpg" width="250"> ... </div>
3. Call the plugin on the parent container and set the options for your grid layout.
$(window).load(function() { var options = { srcNode: 'img', // grid items (class, node) margin: '20px', // margin in pixel, default: 0px width: '250px', // grid item width in pixel, default: 220px max_width: '', // dynamic gird item width if specified, (pixel) resizable: true,// re-layout if window resize transition: 'all 0.5s ease' // support transition for CSS3, default: all 0.5s ease } $('.grid').gridify(options); });
Change log:
2014-10-17
- optimize
2014-10-11
- optimize
2014-10-09
- fix animation
2014-10-08
- Update gridify.js
About Author:
Author: Nguyen Hong Khanh
Website: https://github.com/hongkhanh/gridify
This awesome jQuery plugin is developed by hongkhanh. For more Advanced Usages, please check the demo page or visit the official website.