#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!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent