Isotope - Magical Dynamic Layout Plugin For jQuery

File Size: 83.2 KB
Views Total: 17779
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Isotope - Magical Dynamic Layout Plugin For jQuery

Isotope is a Magical Dynamic Layout Plugin features Layout modes(Intelligent, dynamic layouts that can’t be achieved with CSS alone.), Filtering (Hide and reveal item elements easily with jQuery selectors) and Sorting (Re-order item elements with sorting. Sorting data can be extracted from just about anything).


How to use it:

1. Install the Isotope library with package managers.

npm install isotope-layout --save1

2. Load the JavaScript file isotope.pkgd.min.js after jQuery library.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/isotope.pkgd.min.js"></script>
<!-- or from a CDN -->
<script src="[email protected]/dist/isotope.pkgd.min.js"></script>

3. Insert your own grid items to the layout.

<div class="grid">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>

4. Categorize your grid items for filtering and sorting.

<div class="grid">
  <div class="grid-item" data-category="cat-1">Item 1</div>
  <div class="grid-item" data-category="cat-2">Item 2</div>
  <div class="grid-item" data-category="cat-3">Item 3</div>

5. Initialize the grid layout with default settings.

  itemSelector: '.grid-item'

6. Customize the grid layout with the following options:


  // required
  itemSelector: '.grid-item',

  // fitRows
  // vertical
  // packery
  // cellsByRow
  // masonryHorizontal
  // fitColumns
  // cellsByColumn
  // horiz
  // masonry (default)
  layoutMode: 'masonry',

  // sets item positions in percent values, rather than pixel values.
  percentPosition: true,

  // stamp elements
  stamp: '.stamp',

  // the horizontal flow of the layout
  originLeft: true,

  // the vertical flow of the layout
  originTop: true,

  // filter function
  filter: null,

  // gets sort data
  getSortData: null,

  // sorts items according to which property of getSortData
  sortBy: 'number',

  // sorts items ascendingly 
  sortAscending: true,

  // staggers item transitions 30ms after one another
  stagger: 30,

  // transition in seconds
  transitionDuration: '0.4s',

  // disable any styles being set on container
  // useful if using absolute position on container
  containerStyle: null,

  // adjusts sizes and positions when window is resized
  resize: true

6. You can also pass the options via the data-isotope attribute.

<div class="grid"
     data-isotope='{ "itemSelector": ".grid-item" }'>
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>



  • v3.0.6

This awesome jQuery plugin is developed by metafizzy. For more Advanced Usages, please check the demo page or visit the official website.