Responsive jQuery Dynamic Grid Layouts Plugin - Freewall

File Size: 8.72 MB
Views Total: 32433
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Responsive jQuery Dynamic Grid Layouts Plugin - Freewall

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

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/freewall.js"></script>

2. Create the grid layout using unordered list

<ul id="container">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>

3. Style the layout

<style type="text/css">
#container {
width: 80%;
margin: auto;
}
.item {
background: rgb(135, 199, 135);
width: 320px;
height: 320px;
}
</style>

4. Call the plugin

<script> $(function() { var wall = new freewall("#container"); wall.fitWidth(); }); </script>

5. Options

animate: false,
cellW: 100, // function(container) {return 100;}
cellH: 100, // function(container) {return 100;}
delay: 0, // slowdown active block;
engine: 'giot', // 'giot' is a person name;
fixSize: null, // resize + adjust = fill gap;
//fixSize: 0, resize but keep ratio = no fill gap;
//fixSize: 1, no resize + no adjust = no fill gap;
gutterX: 15, // width spacing between blocks;
gutterY: 15, // height spacing between blocks;
keepOrder: false,
selector: '> div',
draggable: false,
cacheSize: true, // caches the original size of block;
rightToLeft: false,
bottomToTop: false,
onGapFound: function() {},
onComplete: function() {},
onResize: function() {},
onBlockDrag: function() {},
onBlockMove: function() {},
onBlockDrop: function() {},
onBlockReady: function() {},
onBlockFinish: function() {},
onBlockActive: function() {},
onBlockResize: function() {}

Change logs:

2016-04-28

  • Fixed issue fire onComplete before animation complete

2016-01-01

  • v1.0.5

2015-05-14

  • refactor

2015-04-28

  • update makeround with fixSize

2015-01-04

  • implement sort feature

2014-12-15

  • Add keep order feature

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

  • add the cache option

2014-04-18

  • break layout on IE8

2014-03-04

  • add destroy method
  • add feature set draggable for individual block

2014-02-27

  • fix issue several instances

2014-02-09

  • improved drag drop

2014-02-08

  • bugs fixed

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

  • Fix XSS vulnerability.

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.