#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:
- Start the new block from left to right, and
- Place the new block under shortest block.
#How to use
- First, include
jQueryandBlocksIt.jsscript files inside the<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).
- Next, call the
.BlocksIt()function on jQuery object.
$(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'
});
| Name | Type | Default | Description |
|---|---|---|---|
| numOfCol | Int | 5 | The number of columns to be created. |
| offsetX | Int | 5 | Margin left and right for each block. |
| offsetY | Int | 5 | Margin top and bottom for each block. |
| adjustWidth | Boolean | false | If true, blocksit will resize the child elements width |
| blockElement | String | "div" | Targeted child elements, which will be converted into blocks. |
#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!