Filterable Masonry Grid In JavaScript – Isolde

Isolde is a lightweight and easy-to-use JavaScript plugin to filter through a set of grid items with a subtle shuffle effect.

How to use it:

1. Install & download the Isolde library with NPM.

# NPM
$ npm i isolde --save

2. Import the Isolde.

import isolde from 'isolde';
import 'isolde/dist/isolde.min.css';

// OR
<link rel="stylesheet" href="./isolde.css">
<script type="module">
  import isolde from './isolde.js';
  const isoldejs = new isolde();
</script>

2. Categorize your grid items using the ‘data-isolde-el’ attribute:

<div id="isolde" class="isolde-default">
  <div data-isolde-el="javascript">
    Item 1
  </div>
  <div data-isolde-el="css">
    Item 2
  </div>
  <div data-isolde-ell="html">
    Item 3
  </div>
  <div data-isolde-el="css">
    Item 4
  </div>
  <div data-isolde-el="javascript">
    Item 5
  </div>
  ...
</div>

3. Create links to filter through the grid items.

<ul>
  <li>
    <a data-isolde-link="javascript">JavaScript</a>
  </li>
  <li>
    <a data-isolde-link="css">CSS</a>
  </li>
  <li>
    <a data-isolde-link="html">HTML</a>
  </li>
</ul>

4. Initialize the library and done.

const isoldejs = new isolde();

5. Possible options to customize the masonry grid.

const isoldejs = new isolde({
      // parent element
       parent:  document.querySelector('#isolde'),
      // filter links
      links: document.querySelectorAll('[data-isolde-link]'),
      // active class
      active: 'is-active',
      // in pixels
      margin: 20,
      // for responsive
      responsive: {
        980: {
          columns: 3
        },
        480: {
          columns: 2
        },
        0: {
          columns: 1
        }
      },
      // fade in/out duration
      fadeDuration:{
        in: 300,
        out: 0
      }
  
});

Changelog:

06/11/2021

• Renamed to Isolde.
• Demo Updated
• Doc updated