Tutorial: Get a tiled layout with jQuery plugins

Have you ever wanted a Pinterest-style layout for your site? Heres some great jQuery plugins to get that responsive tiled look.
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.