Submit your widget
HomeImage EffectsjQuery cool dynamic grid layout plugin

jQuery cool dynamic grid layout plugin

Created 11 years ago   Views 54194   downloads 8611    Author inwebson
jQuery cool dynamic grid layout plugin
View DemoDownload
87
Share |

BlocksIt.js is a jQuery plugin for creating dynamic grid layout. It manages to convert HTML elements into ‘blocks‘ and position them in well-arranged grid layout like Pinterest, one of the hottest website nowadays =). How? Well, simply specific the number of columns you wish to have and BlocksIt.js will do the rest for you. Also, you can even combine the ‘blocks‘ and make a huge block! So, let’s blocks it!

BlocksIt.js will re-position the selected elements using CSS absolute position property. It has the capability to calculate the top and left positions for an element based on certain criteria, like below:

  1. Start the new block from left to right, and
  2. Place the new block under shortest block.

 

How to use

1. First, include jQuery and .BlocksIt.js script files inside <head> tag like usual.

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="blocksit.js"></script>

It should works well with jQuery 1.7.1 (haven’t tested for lower version).

2.) Next, call the .BlocksIt() function on jQuery object. It supports for few settings, do refer to Configuration section below for deep details.

$(document).ready(function() {
   $('#objectID').BlocksIt();
});

Read more:http://www.inwebson.com/jquery/blocksit-js-dynamic-grid-layout-jquery-plugin/

You might also like