Another brick in the wall

Tutorial: Get a tiled layout with jQuery plugins

Elliot Bentley
tiles-teaser

Have you ever wanted a Pinterest-style layout for your site? Here’s 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.

Author
Comments
comments powered by Disqus