Using jQuery Isotope for masonry in fluid layouts

Even though the last minor version of the jQuery Isotope plugin was released almost 2 years ago in 2011, it is still a fully working and widely used plugin. However, since it is from times where responsive web design has not played such a leading role as it does today, a few lines of additional code are required to make it work properly in liquid layouts.

The author of the plugin David DeSandro has dedicated a demo page1 to this topic, I found a solutions in a comment on github2 and in several articles and I saw a working solution on a portfolio page3. However I could not find any implementation with a reasonable amount of additional code that would always cover the full available space.

So to utilize Isotope in responsive websites until version 2 will be released4 at some point in the future, I wrote this little peace of code which works fairly well for me. The trick is to calculate the pixel values on resize and to decrease the number of columns at certain breakpoints.

You can find my version in a jsfiddle or in the demo.

If you are looking for an easy way to use Isotope in CMS made simple, you may want to have a look at Goran’s article "Using ListItExtended and Isotope jQuery plugin for nice showcase page".

1) http://isotope.metafizzy.co/demos/fluid-responsive.html
2) https://github.com/desandro/isotope/issues/271#issuecomment-9609170
3) http://chris-armstrong.com/inspiration
4) https://github.com/desandro/isotope/issues/524#issuecomment-22640902

Arvixe Hosting

Comments