Isotope

Filter & sort magical layouts

Filter

Sort

$container.isotope({
  itemSelector: '.element-item',
  layoutMode: 'fitRows',
  ...
})
Mercury

Hg

80

200.59

Tellurium

Te

52

127.6

Bismuth

Bi

83

208.980

Lead

Pb

82

207.2

Gold

Au

79

196.967

Potassium

K

19

39.0983

Sodium

Na

11

22.99

Cadmium

Cd

48

112.411

Calcium

Ca

20

40.078

Rhenium

Re

75

186.207

Thallium

Tl

81

204.383

Antimony

Sb

51

121.76

Cobalt

Co

27

58.933

Ytterbium

Yb

70

173.054

Argon

Ar

18

39.948

Nitrogen

N

7

14.007

Uranium

U

92

238.029

Plutonium

Pu

94

(244)

Edit this example on CodePen

Install

Download

CDN

Link directly to Isotope files on cdnjs.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.js"></script>
<!-- or -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>

Package managers

Install with Bower: bower install isotope --save

Install with npm: npm install isotope-layout

License

Commercial license

If you want to use Isotope to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Read more about Isotope commercial licensing.

Once purchased, you’ll receive a commercial license PDF and be all set to use Isotope in your commercial applications.

Open source license

If you are creating an open source application under a license compatible with the GNU GPL license v3, you may use Isotope under the terms of the GPLv3. Read more about Isotope open source licensing.

Getting started

HTML

Isotope works on a container element with a group of similar child items.

<div id="container">
  <div class="item">...</div>
  <div class="item w2">...</div>
  <div class="item">...</div>
  ...
</div>

Include the Isotope script in your site.

<script src="/path/to/isotope.pkgd.min.js"></script>

CSS

All sizing of items is handled by your CSS.

.item { width: 25%; }
.item.w2 { width: 50%; }

Initialize with JavaScript

Initialize an Isotope instance as a jQuery plugin: $('#container').isotope().

var $container = $('#container');
// init
$container.isotope({
  // options
  itemSelector: '.item',
  layoutMode: 'fitRows'
});

There are a number of options you can specify.

That’s it! Now let’s do some fun stuff with filtering and sorting.

imagesLoaded

Unloaded images can throw off Isotope layouts and cause item elements to overlap. imagesLoaded resolves this issue. Read more about using imagesLoaded with Isotope.

Vanilla JavaScript

jQuery is not required to use Isotope. Given its popularity, jQuery will be used for all example code in these docs. But you can still use Isotope with vanilla JS.

Initialize an Isotope instance with new Isotope( element, options ). The Isotope constructor accepts two arguments: the container element and an options object.

var container = document.querySelector('#container');
// init
var iso = new Isotope( container, {
  // options
  itemSelector: '.item',
  layoutMode: 'fitRows'
});

The element can be a selector string for a single element.

var iso = new Isotope( '#container', {
  // options
});

Initialize in HTML

You can initialize Isotope in HTML, without writing any JavaScript. Simply add js-isotope to the class of the container element. Options can be set with a data-isotope-options attribute.

<div id="container" class="js-isotope"
  data-isotope-options='{ "columnWidth": 200, "itemSelector": ".item" }'>

Options set in HTML must be valid JSON. Keys need to be quoted, for example "itemSelector":. Note that the attribute value uses single quotes ', but the JSON entities use double-quotes ".

v1

Isotope is currently v2. See isotope.metafizzy.co/v1 for documentation and resources for previous v1 version.

Isotope in use

Justin Bieber, Tyler Perry, Colonel Sanders: they all have used Isotope.

Are you using Isotope? Tweet @metafizzyco or email yo@metafizzy.co to share your work and possibly get it featured here.

Twitter updates from @metafizzyco