JQuery Masonry - dynamic layout, typeset without “holes”

Masonry (developer David DeSandro ) is a jQuery-plugin that allows you to quickly and easily organize a dynamic layout of blocks of different sizes with almost no loss of space, and if you select the appropriate size of blocks, then without empty spaces at all.

By dynamic layout, I mean that the blocks will be located in the container depending on its size, filling its space as rationally as possible, thereby saving space on the page.

How it works (minimum required)

First we need to connect the jQuery and the plugin itself:

<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 we will create a simple block structure with which the plugin will work:

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

')
And write the float for the blocks, without this the plugin does not work

 .item { float: left; } 

We start magic, inserting the following code in any place of the page:

 <script type="text/javascript"> $(document).ready(function(){ $('#container').masonry({ //  -        itemSelector: '.item', //         singleMode: false, // true -        isResizable: true, //       isAnimated: true, //    animationOptions: { queue: false, duration: 500 } //   -     }); }); </script> 

Done! Now try resizing the window and see everything with your own eyes.

Animation

If you want to use css transition instead of jQuery animation, I recommend using another jQuery plugin Modernizr -transitions, with which css transition will work in browsers that do not support css3 (for example, Internet Explorer version 8 and older).

We connect modernizr-transitions :

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

In the Masonry options, change isAnimated and delete the animationOptions: {...}:

 isAnimated: !Modernizr.csstransitions 

And prescribe css transition for blocks, for example:

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

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 plugin settings and documentation can be found on the official website .