# Isotope — Filter and Sort Magical Animated Layouts

> A JavaScript layout library that arranges elements in masonry, grid, and other patterns with animated filtering, sorting, and responsive repositioning.

## Install

Save as a script file and run:

# Isotope — Filter and Sort Magical Animated Layouts

## Quick Use
```bash
npm install isotope-layout
```
```js
import Isotope from 'isotope-layout';
const iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'masonry'
});
iso.arrange({ filter: '.metal' });
```

## Introduction
Isotope is a JavaScript layout library by Metafizzy that arranges elements into masonry, fit-rows, vertical, and other grid patterns. It provides animated filtering and sorting so users can dynamically reorganize content with smooth CSS transitions, making it a staple for portfolio pages, galleries, and filterable catalogs.

## What Isotope Does
- Arranges elements in masonry, fitRows, vertical, and cellsByRow layouts
- Filters items by CSS selectors or custom functions with animated transitions
- Sorts items by data attributes, text content, or custom comparators
- Handles responsive re-layout on window resize automatically
- Supports dynamically added and removed elements with layout updates

## Architecture Overview
Isotope measures each element's size and calculates optimal placement using the selected layout algorithm. When filtering or sorting, it applies CSS transforms (translate and scale) with transitions to animate items from their old positions to new ones. Hidden items are scaled to zero and have pointer-events disabled. The library uses a modular layout system where each mode (masonry, packery, fitRows) implements its own placement logic while sharing the animation and measurement infrastructure.

## Self-Hosting & Configuration
- Install via npm or include the script directly from a CDN
- Initialize with a container selector and itemSelector option
- Set ``layoutMode`` to choose between masonry, fitRows, vertical, or cellsByRow
- Use ``getSortData`` to define custom sort keys from element attributes
- Call ``iso.arrange({ filter, sortBy })`` to apply filter and sort simultaneously

## Key Features
- Multiple built-in layout modes with extensible plugin architecture
- Animated filter and sort transitions with CSS transforms
- Responsive layout that recalculates on container resize
- Stamp support to fix certain elements in place during layout
- Compatible with imagesLoaded for layouts dependent on image dimensions

## Comparison with Similar Tools
- **Masonry** — layout-only by the same author; Isotope adds filtering and sorting on top
- **CSS Grid** — native but lacks animated filtering and dynamic sorting
- **Packery** — bin-packing layout by the same author; Isotope offers more layout modes
- **Muuri** — similar features with drag-and-drop; Isotope is more mature and widely adopted

## FAQ
**Q: What is the difference between Masonry and Isotope?**
A: Masonry provides only layout. Isotope includes masonry layout plus animated filtering, sorting, and multiple layout modes.

**Q: Can I add items after initialization?**
A: Yes. Call ``iso.appended(elements)`` or ``iso.insert(elements)`` to add items and trigger re-layout.

**Q: Does Isotope work with images?**
A: Yes. Pair it with the imagesLoaded library to trigger layout after images have loaded.

**Q: Is Isotope free to use?**
A: Isotope uses a GPL v3 license for open-source projects and offers commercial licenses for proprietary use.

## Sources
- https://github.com/metafizzy/isotope
- https://isotope.metafizzy.co

---
Source: https://tokrepo.com/en/workflows/asset-fb0dbe0d
Author: Script Depot