1. Install the module like normal.
1. More Info can be found here. https://www.drupal.org/docs/7/extend/installing-modules
2. By default the module reads from a CDN. If you would prefer a local copy of the script, install the libraries module, and download isotope.pkgd.min.js from http://isotope.metafizzy.co/ to /sites/all/libraries/isotope (or use drush make).
3. Set up an Isotope configuration for your site at admin/config/user-interface/isotope
   • Isotope Layout Mode: 3 are available by default. If you want more options, install additional JS libraries provided by the links under "Installing Additional Plugins" Note: You must save the JS files within sites/all/libraries/isotope in order for it to pick up the additional plugins. Clear cache.
   • Additional Plugins imagesLoaded is greyed out. If you want to enable it, you must download the file so that it lives here: sites/all/libraries/isotope/imagesloaded.pkgd.min.js Imagesloaded will solve the problem of images not loading properly because isotope is firing before the images have loaded and therefore cannot calculate the height accurately.
   • Transition Duration This controls the speed at which the images reposition after adjusting the window.
4. If you are not using views, but just want to output a list using a theme function, then follow the instructions over at Using the Theme Method.
5. If you are planning to use views, install the Isotope Views sub-module, then follow the instructions over at Using the Views Method.

Optional Libraries

The settings page has several options that might be disabled until you download the relevant js files. By default the module looks for the following: ("sites/all" is just an example... it will check any library folder. It also checks the "/libraries/isotope/" directory for all of these, so you can put them all in there if you wish.)

Note: As of this writing, Isotope 7.x-2.0 also supports the latest version of isotope.pkgd.min.js (v3.0.2).

• sites/all/libraries/isotope/isotope.pkgd.min.js
• sites/all/libraries/cellsByRow/cells-by-row.js
• sites/all/libraries/packery/packery-mode.pkgd.min.js
• sites/all/libraries/masonryHorizontal/masonry-horizontal.js
• sites/all/libraries/fitColumns/fit-columns.js
• sites/all/libraries/cellsByColumn/cells-by-column.js
• sites/all/libraries/horizontal/horizontal.js
• sites/all/libraries/imagesLoaded/imagesloaded.pkgd.min.js (at time of writing, imagesLoaded requires a minimum jQuery version of 1.9)

CSS

The end result will not be very impressive until you apply some css. Here is some example css, for a fluid 4-column layout.

.isotope-grid-sizer { width: 22%; }
.isotope-gutter-sizer { width: 4%; }
.isotope-element { width: 22%; height: 50px; }
.isotope-element.my-data-value { width: 48%; }

You can see more styling examples at http://isotope.metafizzy.co/layout.html