This time I will share jQuery Plugin and tutorial about Responsive jQuery Dynamic Grid Layouts Plugin – Freewall, hope it will help you in programming stack.
Freewall is a responsive and cross-browser jQuery plugin for creating dynamic grid layouts for desktop, mobile and tablet. Freewall allows you to create many types of grid layout (flexible layout, images layout, pinterest-like laytout, etc) with nice CSS3 animation effects and call back events.
How it works:
Based on the width (or height) of a container and the width (height) of a cell unit, It will create a virtual matrix. Scaning the matrix at each cell will find a free cell around to made a free area, then try to fit a block element into it. In case no block can fit the gap, it will resize the block to fill the gap (that is one of the options).
Basic Usage:
1. Include jQuery library and jQuery Freewall plugin on the web page
2 |
< script type = "text/javascript" src = "js/freewall.js" ></ script > |
2. Create the grid layout using unordered list
3. Style the layout
01 |
<style type= "text/css" > |
07 |
background : rgb ( 135 , 199 , 135 ); |
4. Call the plugin
1 |
<script> $( function () { var wall = new freewall( "#container" ); wall.fitWidth(); }); </script> |
5. Options
17 |
onGapFound: function () {}, |
18 |
onComplete: function () {}, |
19 |
onResize: function () {}, |
20 |
onBlockDrag: function () {}, |
21 |
onBlockMove: function () {}, |
22 |
onBlockDrop: function () {}, |
23 |
onBlockReady: function () {}, |
24 |
onBlockFinish: function () {}, |
25 |
onBlockActive: function () {}, |
26 |
onBlockResize: function () {} |
Change logs:
2016-04-28
- Fixed issue fire onComplete before animation complete
2016-01-01
2015-05-14
2015-04-28
- update makeround with fixSize
2015-01-04
2014-12-15
2014-12-06
- changes ‘cache’ option to ‘sizeCache’
- update fixSize option
2014-09-27
- add onDragStart, onDrag, onDrop event callback
2014-05-24
- fixed issue fixSize block overlap
2014-05-21
- Fixed: crash page with fixSize
2014-05-08
- Fixed: out of memory with appendBlock
2014-05-06
- make the feature filter work with the fix-position.
2014-05-02
2014-04-18
2014-03-04
- add destroy method
- add feature set draggable for individual block
2014-02-27
- fix issue several instances
2014-02-09
2014-02-08
2014-01-22
- Fixed: Fire onComplete event with appendBlock
2014-01-20
- add appendHoles method
- change default selector
2014-01-19
- fixed data-fixSize problem
2014-01-09
2013-12-31
Update to the latest version
- update append feature
- improve animation
This awesome jQuery plugin is developed by kombai. For more Advanced Usages, please check the demo page or visit the official website.