Tutorial: Get a tiled layout with jQuery plugins

Have you ever wanted a Pinterest-style layout for your site? Here’s some great jQuery plugins to get that responsive tiled look.

Masonry

Masonry is the work of web developer David DeSandro, and actually predates Pinterest by about six months. It arranges items – <div>s, images or any other block element you might be using – so that they are arranged with equal space between each element, like bricks in a wall. The plugin dynamically rearranges blocks on the fly, even animating the transition. It’s all very slick, and very easy to get working, too!

First, download the Masonry plugin (make sure to right-click and save as) and reference it in your header below jQuery.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="/jquery.masonry.min.js"></script>

Masonry requires a container to be specified, and optionally the items to be arranged. In this case the container is a <div> with ID “container”), and the elements being arranged are <div>s with the class “item”. Elements being arranged must have a consistent width (or a multiple of your base width) and the float: left property.

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

Here’s the relevant JavaScript, to be pasted in below the HTML. Note that the container’s ID or class should be within ‘#container’, and the item’s ID or class should be within ‘.item’. The property “columnWidth” should be set at whatever width your items are (in this case, 240 pixels).

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

If you have several types of item within the container, you can easily specify for them all to be arranged by Masonry by just adding a comma.

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

You can see all the above in practice in a demo we’ve put together.

If you need to customise your layout a bit, take a look at the other options, including switching off the animations, adding a gutter to arranged elements and right-to-left layouts.

Brilliantly, this is all available for free for both personal and commercial use under an MIT license, and the source code is available on github, too. If you’re trying to keep your website’s size as small as possible, there’s also a 6kb “vanilla” version which contains the relevant jQuery bits so you don’t have to include the full 32kb library.

Isotope

If you’re looking for something with a bit more flair than Masonry, why not try its younger but far more capable brother Isotope? Also by David DeSandro, Isotope adds a range of extra effects, including the ability to sort and filter items and to change layout modes on the fly, making it a good choice if you want to expand beyond just arranging your content, and giving it a cool dynamic look (though DeSandro warns: “just because you can take advantage of its numerous features together, doesn’t mean you necessarily should”).

However, these extra features come at a cost: while Isotope is free for personal use, it costs a one-off payment of $25 for commercial use. For more information, check out the Isotope site, which is full of examples of the plugin’s many options – or just jump in and download it now (again – make sure to right-click and save as).

jQuery Tiles Gallery

While the other plugins featured here can only deal with items of a certain width (or a multiple of said width), jQuery Tiles Gallery by Darko Romanov can arrange images of any size and shape into a neat box. It can also add animated captions to images by just modifying the image’s alt property.

However, this comes with some caveats. As you may be able to tell from the name, Tiles Gallery is optimised for laying out images and may not be useful for a more ambitious site design. It also costs $5 for a license, even for personal use. Finally, it’s designed for a fixed-width container, meaning it won’t be able to adapt to different browser sizes.

Despite these limitations it’s still worth a look, and you can see some more examples at its Code Canyon page. There’s also a version which works as a Wordpress plugin if you want to save some time.

Wookmark jQuery plugin

If you’re looking for something cheap, open-source and free of any superfluous features, look no further than the Wookmark jQuery plugin. This plugin is even simpler than Masonry and lacks animation, but it still works like a charm.

Wookmark are a Pinterest competitor whose site has an appropriately Pinterest-style layout, and they’ve rather generously open-sourced the jQuery plugin they developed to achieve this effect. You can read it about it on the Wookmark jQuery page, or download it directly from github.

Build your own

Finally, if you know a bit more code and feel like getting your hands a bit dirtier, you can always try building your own plugin. Ben Holland has a great tutorial to get you started.