Improvement of the existing bl

#blocksit.js

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!

#How It Works

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:

#How to use

<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).

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

Note: If the blocks contains of element, be sure to specific the images’ height before calling .BlocksIt() function, else you have to make sure the images are loaded.You could use $(window).load() to make sure everything have loaded into DOM, or use some plugin like waitForImages to check the images status.

#Configuration

//.BlocksIt( [Options] ) $('.container').BlocksIt({ numOfCol: 5, offsetX: 5, offsetY: 5, adjustWidth: false, blockElement: 'div' });

#FAQ

1. My elements are set outside of my container! Why?

I don't know why, but to fix it, make sure your container has the following css property: position: relative;

2. Can I see what it does ?

There is actually two example available. First, Second.

#About this git

This git repository is here to help improve the original script file originally found on inwebson. Pull requests, submit issues, whatever helps!