JQuery Masonry — dynamic layout layout without "holes"

Masonry (developer of David DeSandro) is a JQuery plugin allowing you to quickly and simple way to create dynamic layout of blocks of different size with virtually no loss of space, but if you choose the appropriate size blocks without empty seats at all.

Under the dynamic layout'ohms meaning that the blocks will be placed in a container depending on its size, efficiently filling the space, thereby saving space on the page.

How it works (the required minimum)

First we need to connect the JQuery himself plugin:
the

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
<script type="text/javascript" src="jquery.masonry.min.js"></script>

Now let's create a simple structure of blocks will work with the plugin:
the

<div id="container">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
...
</div>

And set float for units without this plugin is not working
the

.item {
float: left;
}

Start the magic by inserting in any place of the page the following code:
the

<script type="text/javascript">
$(document).ready(function(){ 
$('#container').masonry({
// specify the container  element  in which are arranged blocks for dynamic layouts
itemSelector: '.item',
// specify the element class is block in our grid
singleMode: false,
// true if you  have  all the blocks the same width
isResizable: true,
// rebuilds the blocks when resizing the window
isAnimated: true,
// use the rebuilt units
animationOptions: { 
queue: false, 
duration: 500 
}
// options of the animation queue and the duration of the animation
}); 
});
</script>

Ready! Now try to resize the window and you will see with your own eyes.

Animation

If you want to use a css transition instead of JQuery animation I recommend to use another JQuery plugin Modernizr-transitions, which css transition will work in browsers that don't support css3 (e.g. Internet Explorer version 8 and older).

Connected modernizr-transitions:
the

<script type="text/javascript" src="modernizr-transitions.js"></script>

In the options isAnimated Masonry replaceable and removable animationOptions: {...}:
the

isAnimated: !Modernizr.csstransitions

And put this css transition for blocks, for example:
the

.item {
-webkit-transition-duration: 0.5 s;
-moz-transition-duration: 0.5 s;
-o-transition-duration: 0.5 s;
transition-duration: 0.5 s;
}

Now, even if the user's browser does not support css transitions, the animation will still work.

Demo can be viewed here or download.

A complete list of the plugin settings and documentation can be found official website.

Article based on information from habrahabr.ru