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 (115) Share Your!

  • 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

    5 days ago! Reply
  • Marcia Hernández

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

    2 weeks ago! Reply
  • kent

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

    1 month ago! Reply
  • furqan

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

    1 month 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

    3 months ago! Reply
  • Juan Camilo

    Hi,
    BlocksIt.js works in mobile devices ?

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

    4 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

    5 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'
    }
    )
    }
    )

    5 months 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.

    5 months ago! Reply
  • Elvis

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

    5 months 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.

    5 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>