Rachel H Kay Blog

Implementing A Masonry Layout Using jQuery Masonry

Recently I decided to update different pages on my website, particularly my portfolio page. I like the masonry layout for images, so I did some research into my options. I found a neat plugin called jQuery Masonry by David Desandro, which seemed to be the best option. Once I’d settled on what to use to implement the masonry layout, I had to figure out how to use it and make it work with the layout of my page.

Since I’m still learning JavaScript this was a new challenge for me to get this to work. There is a lot of documentation on how to implement Masonry, the only problem was that I couldn’t get it to work with my layout, and I wasn’t going to change the entire code of my portfolio page to get it to work. So I began looking for options on ways to setup Masonry 3 with a site built with Bootstrap. I ended up finding a template on GitHub for implementing Masonry 3 with Bootstrap 3 by Justin Carroll. The script file was what I needed, and I was able to use it to work with the layout of my portfolio page, and still have some space between each of the images, which is what I wanted. All I had to do was change the .post class and #post id being used in the original code to my portfolios class and id.

Images Load Left Using Masonry Plugin

Then I ran into my first issue. Once I’d gotten the Masonry plugin to work, on page load, all my images were on the left of the page before the Masonry plugin finished loading. I knew I needed to find a solution, so that meant another Google search.

Apparently a lot of other people have had similar issues with their code, so there were a lot of different solutions, but the main solution that was supposed to fix the problem was using the imagesLoaded plugin also by David Desandro. The only problem was, figuring out how to implement it into the code I was using for the Masonry plugin, which I couldn’t figure out with the examples on the imagesLoaded site. So I began another Google search to find a solution. When stuck on a problem, Google can be your best friend.

I found a lot of different issues related to Masonry and imagesLoaded, but I had to go through quite a few before I found something I was able to add to the code I was using for Masonry.

First of all I had to get rid of the window.load function surrounding my code. This was the reason for the delay in loading the images, and the start to my problem. So I removed the window.load function and replaced it with document.ready.

Then I used the imagesLoaded function to wait for the images to load, and then loaded masonry.

        $(document).ready(function() {

                var gutter = parseInt(jQuery('.post').css('marginBottom'));
                var container = jQuery('#post');

                    container.imagesLoaded(function () {

                    container.masonry({
                    gutter: gutter,
                    itemSelector: '.post',
                    columnWidth: '.post'
                    });
                    });

                //resize code here
        )};

It took a bit of trial and error since the code I’m using is different from what others are using, but I did figure it out.

Left Loading When Images Aren’t Cached

Now my images did load faster, but they still appeared on the left first, but for a shorter amount of time if the images weren’t already cached in my browser. That meant that any new visitors would still see the images on the left of the page before Masonry finished loading and was able to place them in the correct layout. If the images were already cached in my browser the Masonry plugin loaded right away. But it was still a problem that needed to be fixed.

Back to Google to find a solution, which I did. It’s helpful when you find someone else with a similar issue to yours that has a solution that you can implement with your own code. It just took me while to find it.

Apparently the problem was that imagesLoaded was waiting until all the images had loaded, and then started Masonry. But until all the images had loaded, there would still be a short time when they would'nt be in the correct layout.

This is where the need to hide the images until they loaded came into play. That way the images won’t display, then imagesLoaded can confirm all the images have loaded, and Masonry can start the layout, and vuala, you get a Masonry layout without that funky look before hand.

        $(document).ready(function() {

                var $boxes = $('.post');
                $boxes.hide();

                var gutter = parseInt(jQuery('.post').css('marginBottom'));
                var container = jQuery('#post');

                    container.imagesLoaded(function () {

                    $boxes.fadeIn();

                    container.masonry({
                    gutter: gutter,
                    itemSelector: '.post',
                    columnWidth: '.post'
                    });
                    });

                // resize code here
        )};
    

I just had to make one little tweak, because the images still showed up for a millisecond before disappearing to allow the imagesLoaded function to do its thing. So I went into my sites CSS file and added “display:none” to the class I’m using for my images and that took care of that. I’m using a different class from what’s in the code I found on GitHub, but for the original code that class would be “.post”.

Now when someone views my portfolio no images display while imagesLoaded confirms all images have loaded, then Masonry starts up and my masonry layout loads. There may be better ways of getting all of this to work using both Masonry and imagesLoaded, but for me, someone new to JavaScript, I’m quite relieved I was able to find ways to get the output I wanted. It's a win win I’ll take!

Hopefully anyone else who is new to JavaScript and finds the GitHub template for using Masonry 3 with Bootstrap 3 useful will also find the tweaks I discovered useful as well.

comments powered by Disqus

About Me

Hi there. I'm Rachel Kay, a Web Developer, Illustrator, & Designer, whose hobby is to be creative and artistic, while freelancing as a Web Developer building creative, modern websites.

Categories