BlocksIt.js – Dynamic Grid Layout jQuery Plugin
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
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();
});
3.) Done! =)
<img> 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] )
Options: An array to configure blocks details.
Options
Few options available:
| 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. |
| blockElement | String | ”div” | Targeted child element, which will converted into blocks. |
Grid Layout
Example of Configuration
The HTML markup for blocks should look like below. data-size attribute specific the size of block (combined blocks).
<div id="container"> <div class="grid class">...</div> <div class="grid class2" data-size="2">...</div> <div class="grid">...</div> <div class="grid class" data-size="3">...</div> <div class="grid">...</div> </div>
And the script will be something like this.
$(document).ready(function() {
$('#container').BlocksIt({
numOfCol: 5,
offsetX: 8,
offsetY: 8,
blockElement: '.grid'
});
});
License
BlocksIt.js is licensed under the GNU General Public License version 2 or later. You can do whatever you like to the source code. =)
Change Log
| Version 1.0 | 24th April 2012 | – First Release, 24th April 2012. |
|---|
Question?
Something’s not working? Or any other questions regarding this plugin please let me know using comments form below.
Amazing! congratulations, your work is just great. I use it in any project.
Hi,
Everything is working fine for me.
But I’ve to make the grid looks like a circle, rounded rectangle and rectangle shape like that it has to generate in a dynamic manner based on the grid height.
Can you please help me on, how to get the all the grid heights separately?
Based on the grid height, I’ll set the border-radius css property using jquery.
Thanks in Advance.
can anybody explain to me how to set #container height? only set fixed height in css??
i have a trouble in chrome. container collapse and items after it displays under images. i try this
http://stackoverflow.com/questions/218760/how-do-you-keep-parents-of-floated-elements-from-collapsing
class clearfix, overflow, inline-block for container, etc ….
but in chrome doesn’t work (
Found the solution: http://yconst.com/web/freetile/
Also, it would be nice to have the number of columns flexible, as to be dependent on the browser window size
Hi
It is not working properly. The whole content gets displayed in the upper left corner!
same problem, i think it s related to the problem on my comment below
Is there a github repo or something that I can contribute to? I noticed that it is adding indexOf to the global array prototype. IMHO, librarires should not be changing global state. I would be happy to contribute a patch but I am not sure how I could go about it. Any guidance on how to contribute would be greatly appreciated.
Thanks for this great plugin.
I have a question, I am getting error on this line:
temparr.push(blockarr[getBlockIndex(x+i, 'x')].endY);
it cannot find value of getBlockIndex(x+i, ‘x’),actually it reuturns undefined when i=2 (i used 3 numOfColumns)
Any suggestions?
Hi,
when I put the data-size=”2″ in the markup, I want this grid box not only to be 2 times wider thatn the other but also to be 3 times higher than the others,
Is this possivle. Where in the script I can find the definition of the daa-size addition?
Thanks in advance!
I wanted to ask if you can use it for an Android application with Eclipse, if you like to use it. Thank you.
Hello,
I am using blocksit,js for an ecommerce layout, focussing on Iphone and Android phones to give two column layout, I have configured the jquery to fit the size of phone. When i see it on browser (by contracting the browser) it works well, whereas when i open it on mobile browser, it gives me 4 columns. Kindly suggest.
Hi!
I have the same problem as Fida
Is it possible that after odświerzeniu did not use the default number of columns?
Please help
Regards