Every designer has come across a itemized design that called for precipitous “blocking” of elements at least once in their lives. Much like the front page of this blog, for instance. And most have found that unless you specify an exact height for each block item, the entire design will fall to shambles once you load the page — not to mention it looks terrible as the default browser engine tries to assemble them together, usually failing miserably. Luckily for us, the folks over at Desandro created a wonderfull jQuery plugin, “Masonry”.
Masonry intercepts the job of the browser to float the object, using it’s own mechanics to position elements both horizontally and vertically. Think Tetris, only for your website.
Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid.
To use jQuery Masonry, download the script here.
1) Place the following text inside your HEAD tag: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script src="/path/to/jquery.masonry.min.js"></script> 2) Next, set all of your items that you want to be masoned to ‘float’.
3) Place the following code into your HEAD tag, adjusting the selector as you wish: $(function(){ $('#container').masonry({ // options itemSelector : '.item', columnWidth : 240 }); });
Voila! Your items should now start blocking up until the page is full.
You can adjust the many parameters of this function by referencing the Masonry Reference.
