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).

Alternative:

• Pinterest Style Dynamic Layout jQuery Plugin - Masonry
• 10 Best Grid Layouts
• 10 Best jQuery/JavaScript Masonry Layout Plugins

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="https://unpkg.com/isotope-layout@3/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>
  ...
</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>
  ...
</div>

5. Initialize the grid layout with default settings.

$('.grid').isotope({
  itemSelector: '.grid-item'
});

6. Customize the grid layout with the following options:

$('.grid').isotope({

  // 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>
  ...
</div>

Changelog:

2018-06-20

• 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.