isotope

Isotope is a JavaScript library that lets you filter and sort items on a webpage with animated, rearranging layouts. If you have a grid of cards, images, or tiles, Isotope can reorganize them smoothly when a visitor clicks a filter button, without reloading the page. The project was built by Metafizzy and ran from 2010 to 2020.

Adding it to a project is straightforward. You can download the script file directly, link to it from a content delivery network, or install it through npm or Bower. Once loaded, you point Isotope at the container holding your items and it takes over the layout. Configuration options let you set column widths and choose how items are arranged.

It works with jQuery if you already use that library, with plain JavaScript, or by adding a data attribute directly to your HTML element. The README shows brief code samples for all three approaches.

The license has two tracks. If you are building an open source project under a GPL-compatible license, you can use Isotope for free. If you are building a commercial website, theme, or application, you need to purchase a commercial license from the project website. The README links to the purchase page and a fuller license explanation.

Isotope is primarily for web developers who want to add interactive filtering and sorting to a page. It does not require a JavaScript framework beyond optional jQuery, and the README keeps its documentation brief, pointing to the project website for full demos and details.