Quick and Easy jQuery Masonry Tutorial

Recently I had the need to create a website with a brick like grid effect. To achieve the effect I used jQuery masonry, in fact EpicWebs uses the same piece of JavaScript. To get hold of the plugin head on over to http://masonry.desandro.com/ and download the js file. Then come back here to learn how to get it all set-up.

How to get started with jQuery masonry

jQuery masonry will allow you to place elements in a brickwork like structure on your site. The benefit is when you use floats they will not tuck under other elements but they will move to the highest element and tuck underneath, creating unwanted space. Take a look at the (awfully drawn) example below.

why-jquery-masonry-example

The majority of the set-up with a masonry grid is to make sure you have the correct html. The following html will create everything you need to get started. All you need to do is fill the grid-item divs with some content. Add as many grid-item divs as required.

<div id="masonry-grid">
    <div class="gutter-sizer"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
</div>

After creating the correct html you will need to apply masonry. First thing is to include the masonry script on your page, use the following code and remember to make sure the path to your script is correct. You can use the firebug network tab to check there are no red 404 errors.

<script src="/path/to/masonry.pkgd.min.js"></script>

Now that you have the script on your page you can call masonry on the #masonry-grid element, you can either use JavaScript or jQuery to achieve this.

Javascript Version

// Javascript
var container = document.querySelector('#masonry-grid');
var msnry = new Masonry( container, {
  // options
  columnWidth: 200,
  itemSelector: '.grid-item'
});

jQuery Version

// jQuery
var $container = jQuery('#masonry-grid');
// initialize
$container.masonry({
  columnWidth: 200,
  itemSelector: '.grid-item'
});

Great, now you should see a nice masonry grid layout on your site, if not then check the next section on help with getting masonry perfect. If your issue is not listed below then leave a comment at the end of this article and I’ll try my best to help.

Be careful, these things broke my masonry grid!

The following pieces of CSS/JavaScript changes meant that my grid just stopped working or didn’t quite position correctly.

Custom Fonts

Custom fonts caused my masonry grid to not position perfectly so I used the following piece of code to rectify it, this only works with Google fonts or other custom fonts that use the font loader (for example typekit). This is what I had to use on EpicWebs.

    WebFont.load({
        google: {
            families: ["Open Sans", "Ranchers"]
        },
        active: function () {
            var e = jQuery("#masonry-grid");
            e.masonry("layout");
        }
    });

Setting a right/left margin

This one is a little more erratic, it doesn’t always break my masonry grid but I found it better just to leave it off and use the gutter-size option of jQuery Masonry.

Broken or Incorrect JavaScript

This is fairly obvious, but it’s surprising how many times a missing bracket can cause you to search your whole code for something so simple. I recommend using Firefox with firebug as it allows you to open up a console with f12 and see exactly what is happening when the code runs. You can also use console.log(“some text”); to output a message in certain areas of code. This is helpful for checking if statements and making sure your code is executing properly.

Filter the masonry grid with jQuery

This can get a little complex but it achieves a great experience for the user. To filter a particular set of grid items I attached a class to each type of grid item and then filtered them using a select box on change. The select box values were the class names that I had set previously to the grid items. After all grid items are hidden and then the grid items with the selected class are shown we call the masonry layout method. Check out the following piece of code to see how it was achieve.

Filtering With Javascript

	// This bit sets up jQuery Masonry
	var $container = jQuery('#masonry-grid');
	$container.masonry({
		itemSelector: '.grid-item'
	});

	// This does the filter by binding an event on the change of a select box
	jQuery("#grid-filter select").on("change", function() {
		group = jQuery(this).val();
		group_class = "." + group;
		
		if(group != "") {
			jQuery(".grid-item").hide();
			jQuery(group_class).show();
			jQuery('#masonry-grid').masonry('layout');
		} else {
			jQuery(".grid-item").show();
			jQuery('#masonry-grid').masonry('layout');
		}
	});

Example Markup For Filtering

<select id="grid-filter">
    <option value="category-one">Category One</option>
    <option value="category-two">Category One</option>
</select>

<div id="masonry-grid">
    <div class="gutter-sizer"></div>
    <div class="grid-item category-one"></div>
    <div class="grid-item category-two"></div>
    <div class="grid-item category-one"></div>
    <div class="grid-item category-one"></div>
    <div class="grid-item category-two"></div>
</div>

When combined with the jQuery above the markup will hide all categories and then display a category based on the value selected.

Start Using jQuery Masonry

You can use the jQuery Masonry plugin for loads of great interfaces on your website, from a brick like wall of images or to a nice blog post listing like the front of EpicWebs. Good luck and get coding!