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 Isotope

1 npm install isotope-layout --save1

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

1 <script src="/path/to/jquery.min.js"></script>
2 <script src="/path/to/isotope.pkgd.min.js"></script>
3 <!-- or from a CDN -->
4 <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

3. Insert your own grid items to the layout.

1 <div class="grid">
2   <div class="grid-item">Item 1</div>
3   <div class="grid-item">Item 2</div>
4   <div class="grid-item">Item 3</div>
5   ...
6 </div>

4. Initialize the grid layout with default settings.

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

Isotope: An exquisite jQuery plugin for magical layouts

Features

  • Layout modes: Intelligent, dynamic layouts that can’t be achieved with CSS alone.
  • Filtering: Hide and reveal item elements easily with jQuery selectors.
  • Sorting: Re-order item elements with sorting. Sorting data can be extracted from just about anything.
  • Interoperability: features can be utilized together for a cohesive experience.
  • Progressive enhancement: Isotope’s animation engine takes advantage of the best browser features when available — CSS transitions and transforms, GPU acceleration — but will also fall back to JavaScript animation for lesser browsers.
  • Pinterest Style Dynamic Layout jQuery Plugin – Masonry
  • Top 50 Best Grid Layout jQuery Plugins

With jQuery

$('.grid').isotope({
  // options...
  itemSelector: '.grid-item',
  masonry: {
    columnWidth: 200
  }
});

With vanilla JavaScript

// vanilla JS
var grid = document.querySelector('.grid');
var iso = new Isotope( grid, {
  // options...
  itemSelector: '.grid-item',
  masonry: {
    columnWidth: 200
  }
});

For More Jquery Plugins Click


Leave a Reply

Your email address will not be published. Required fields are marked *