How to create jQuery Isotope responsive masonry layout

Isotope is a great jquery plugin for magical layout. It has features like filtering, sorting and several layout modes. In this tutorial, I’ll show you how to create responsive masonry layout and filtering items. By default, 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 responsive masonry layout using Isotope
• Add filtering to sort items

Outcomes

• Successfully create responsive masonry layout using Isotope

Demo    Source

Organizing your project and structuring HTML

The initial step is to organize your project for the better development process. For now, we will create folders and add all necessary files into 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 this codes below:

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

As our HTML is ready, let’s move to styling our layout. Add following codes below to 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 Isotope plugin. Add this codes below into your js/functions.js file:

It’s time to open our index.html file into 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 following codes to 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 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 this codes above.

Resizing Layout

So far we have everything properly and our masonry columns are showing as they 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 really don’t expect to be there. All of the spaces inside wrapper should be distributed equally for each of the columns. To fix this issue we need to add a 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 that sometime Isotope layout gets broken when it is called before image loading. If you face this issue, you should call Isotope one more time after 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 item group list then update Isotope based on item click using jQuery. At first, let’s create filter nav list and style it. Update your index.html file by replacing with following codes:

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

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

Let’s try open your index.html file into your browser where you should see the filter navigation at the top of the contents and after clicking it is showing specific items.

Note:  Chrome browser has 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 🙂