BlocksIt jQuery Plugin

BlocksIt.js – Dynamic Grid Layout jQuery Plugin

Written by Kenny on April 24, 2012 jQuery
BlocksIt.js is a jQuery plugin for creating dynamic grid layout like Pinterest. It allows join of 2 or more blocks into a big block element.

BlocksIt.js – Dynamic Grid Layout jQuery Plugin

BlocksIt 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:

  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();
});

3.) Done! =)

#Note: If the blocks contains of <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:

NameTypeDefaultDescription
numOfColInt5The number of columns to be created.
offsetXInt5Margin left and right for each block.
offsetYInt5Margin top and bottom for each block.
blockElementString”div”Targeted child element, which will converted into blocks.
Grid Layout

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.024th 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.


» This Might Interest You «

User Feedbacks (125) Share Your!

  • RJ

    anyone can say how it work in adobe edge animate?

    1 month ago! Reply
  • hi,

    Nice script. working fine. one more issue found. in crome browser images are overlapping i the case off responsive. intialy not adding the width and height of image tag. bcoz its reposnisve.. so i canot add image width and height.. any solution for overlaping problems.

    2 months ago! Reply
  • prafulla

    doesn’t support ie 8 and ie 9 browser how can I overcome

    4 months ago! Reply
  • Alex

    How create down loading scrolling?

    4 months ago! Reply
  • Lukas

    Hi, I have problem with BlockSit. I have numOfCol set to 3, but when I select from database only one item it has third of its width.

    5 months ago! Reply
  • DIego

    On firefox dont load with animation like on chrome or safari

    7 months ago! Reply
  • Manish Sharma

    Hi BlocksIT Team,

    Thanks for the script. Its a great script . What i am using is i am creating dynamic columns based on my design i.e if site is view in mobile devices I need to show 1 column and for web view I have 2 column view for the blocks. And i have 100s of Posts loaded from ajax and successfully able to call block sit on them. The issue is that when i am changing the view from portrait to landscape in mobile then i am calling blocksit on two classes. one of the classes is working fine and another class is getting unusual height which is creating problem in the design .

    Can you please help me by any means ?

    Regards,
    Manish Sharma

    7 months ago! Reply
  • Wow…… Good…… http://fatbiker.co.kr

    7 months ago! Reply
  • Tulenisko

    Script is superb, just wanna ask, how to make a combination of both your demo’s. I use it to show gallery of pictures, but want them every time different. So the first one would be next time somewhere else. In the second demo it is done by cloning one and the same grid with random height and width, but how to make it for different grids?

    7 months ago! Reply
  • Leah Nadolski

    Hello,

    I am looking at using this plugin, but am a little bit thrown by the fact that on iPhone Safari it is being displayed not at the media query breaking point it should, but instead at the full column five width. Does this not work on the phone?

    Leah

    7 months ago! Reply
  • Marcia Hernández

    How can I place a youtube video?
    (sorry, I’m not a developer)

    8 months ago! Reply
  • kent

    If it’s possible that I add some new one after blicksit init?

    9 months ago! Reply
  • furqan

    Hi
    nice work one issue how to adjust with tow column Grid for this grid

    9 months ago! Reply
  • Here is a Github that is just waiting for improvements.
    I already added an option so it won’t resize the blocks width automatically.

    https://github.com/Micka33/blocksit.js

    10 months ago! Reply
  • Juan Camilo

    Hi,
    BlocksIt.js works in mobile devices ?

    10 months ago! Reply
  • Hi,
    How can I respect the order of the elements inside the main container? I’m sorting the content before applying it to the content.
    Thanks.

    11 months ago! Reply
  • Hi

    Love it…but…..

    I notice that once all of the divs are rendered to the screen, BlocksIT will then do the shuffle to animate and position the boxes. This causes a flicker as the boxes are first rendered to the screen and then reorganised. I have tried to hide the containing div and then show it when the shuffle is about to start. Is there anyway to preload all of the content without it being visible and show it when ready? Have a look at my site if you are not sure what I mean…

    Thanks

    James

    12 months ago! Reply
  • Benjamin

    using Blocksit with Drupal CMS
    add blocksit.min.js to theme folder
    add to theme.info file:

    scripts[] = blocksit.min.js

    Place code within block or page content. this was written to be applied within the header section of a view. drupal-jQuery work-around

    jQuery( document ).ready(
    function( $ ) {
    $('.view-content').BlocksIt({
    numOfCol: 4,
    offsetX: 8,
    offsetY: 8,
    blockElement: '.views-row'
    }
    )
    }
    )

    1 year ago! Reply
  • Chris Cooley

    Good stuff. For responsive just put your (.BlocksIt) in a function then re call the function on your braking points. I am just passing (numOfCol) depending on window width works great.

    1 year ago! Reply
  • Elvis

    Seems that tehr is a little problem in Chrome, images are overlapping. All other browsers look okay

    1 year ago! Reply
  • Script is nice but I feel it misses a responsive approach when resizing window.
    Btw, this needs an official Github page so we could post issues and stuff, and even do pulls.

    1 year ago! Reply
    • Bob

      I agree. I’ve already tried using wookmark, but that leaves spaces on either side of the content that I can’t seem to resize.

      2 months ago! Reply

Leave a Feedback

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>