How to create jQuery Isotope responsive masonry layout

Isotope is a great jQuery plugin for magical layouts. It has features like filtering, sorting, and several layout modes. In this tutorial, I’ll show you how to create a responsive masonry layout and filter items. By default, the isotope masonry layout does not work properly in terms of responsiveness. I will explain how we can fix that and make our layout smooth for all devices.

Requirements

• jQuery – Download
• Isotope Plugin – Download

Goals

• Create a responsive masonry layout using Isotope
• Add filtering to sort items

Outcomes

• Successfully created responsive masonry layout using Isotope

Demo    Source

Organizing your project and structuring HTML

The initial step is to organize your project for a better development process. We will now create folders and add all necessary files to our project. I usually follow this below when I start a mini-project.

 

 

 

 

 

 

 

 

 

Now it’s time to add HTML structure and include Isotope into our index.html file. Add the codes below:

Next, we will add our project item HTML into the projects-wrapper div block. Add the following codes:

As our HTML is ready, let’s move to styling our layout. Add the following codes below to the css/styles.css file:

Note: I’ve used basic CSS reset for this project here. You can use normalize.css or twitter bootstrap.css as well.

Initiate Isotope

Now we are all set to initiate the Isotope plugin. Add the codes below to your js/functions.js file:

It’s time to open our index.html file in the browser. You should see the Isotope masonry layout. But there is an issue as the masonry column contents are not looking good. It has so many extra spaces around item images. So we need to create a dynamic column width function to fix this issue. Let’s add the following codes to the js/functions.js file by replacing older codes:

colWidth() function will calculate column width based on your screen size and then update column width using the jQuery CSS function. This is we will get the exact amount of pixels for each column width. Also, you will notice that I’ve defined columns based on device screen width so when the width is greater than 1200px it will show 5 masonry column layout and so on. You control your columns by updating the codes above.

Resizing Layout

So far we have everything properly and our masonry columns are showing the way we wanted but still, we have a problem. When you resize your window you will see the projects wrapper has extra spaces on the right side which we don’t expect to be there. All of the spaces inside the wrapper should be distributed equally for each of the columns. To fix this issue we need to add very small jQuery plugin codes called smartresize from here. You have to update your js/functions.js file with the following codes below:

We are all set now, everything should be working perfectly. There is one more thing you may notice Sometimes isotope layout gets broken when it is called before image loading. If you face this issue, you should call Isotope one more time after the window load. Add the following codes below to your js/functions.js file:

Add Filtering

It’s time to add filtering to sort project items. This step is optional, if you don’t need filtering then you may skip it. Initially, we will create an item group list and then update Isotope based on item click using jQuery. First, let’s create a filter nav list and style it. Update your index.html file by replacing it with the following codes:

You will notice that on top we have a filter nav list item and a pointing class name inside project items. Now update your css/styles.css file with the following codes:

To make the above codes interactive we need to add the following codes to our js/functions.js file:

Let’s try opening your index.html file in your browser where you should see the filter navigation at the top of the contents and after clicking it shows specific items.

Note:  Chrome browser has a cache issue for static files. So it is recommended to use ctrl / command+shift+r to reload the content to see the new changes.

Demo    Source

Conclusion

At this stage, everything should be running properly. You can do whatever you wish with items like adding hover overlay, lightbox effect on images etc.

Happy coding 🙂 🙂