Masonry: A dynamic layout plugin for jQuery

If you have come around here within the last few weeks, you might have noticed the new " History"-menu at the top of my blog? Well, I call it history because of what I use it for — but really what this is, is simply a one-page layout with eternal scrolling that uses the plugin masonry from masonry.desandro.com.

The plugin

I´ve been looking at this plugin quite a few times, and today I finally got around to play around with it, which resulted in my new history-page.

The introduction from the developers site sound like this:

Masonry is a dynamic grid layout plugin for jQuery. Think of it as the flip-side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall

We´ve probably all (if you are a web developer) been bugged by this issue quite a few times … those damn floats :p but I´m glad to say this the masonry-plugin let´s you handle this with ease! Include the plugin and all you need to do is to define what elements/items to handle:

$(function(){
    $('#container').masonry({
        itemSelector: '.item',
        columnWidth: 240
    });
});

The plugin comes with a great deal of animation- options, such as speed and transition, reading-direction, whether the layout should be resizeable as well as a specific option for the gutter-with.

Personally I´ve also taken use of the infinite scroll plugin, provided when downloading — I was inspired by the pinterest-layout from day one I visited the site, but never really hat a good reason for implementing a similar thing … Masonry basically gave me this right on top :)