A Javascript Plugin for Filtering Items from a ‘Masonry’ Grid | Isolde

Isolde is a lightweight, flexible and responsive JavaScript plug-in that allows you to filter items from the Masonry grid. This plugin filters through a group of grid elements with a random effect.

masonry grid js, masonry js, masonry grid css, masonry gallery jquery, masonry js tutorial, masonry js alternative

How to make use of it:

1. Install & download the Isolde library with 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();

2. Categorize your grid objects utilizing the ‘data-isolde-el’ attribute:

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

3. Create links to filter by way of the grid items.

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

4. Initialize the library and carried out.

const isoldejs = new isolde();

5. Possible choices 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
        in: 300,
        out: 0

Filterable Masonry Grid, Isolde Plugin/Github

See Demo And Download

Official Website(TristanBlg): Click Here

This superior jQuery/javascript plugin is developed by TristanBlg. For extra Advanced Usages, please go to the official website.

Related Posts


[Icon Picker] Iconpicker for Bootstrap 5 Icons Library

Bootstrap 5-based icon picker which supports any icon libraries like Bootstrap Icons, Font Awesome[fontawesome.com], etc. Must Read: 1000+ Pixel Perfect SVG Icons For Vue Components | Unicons How…


Bootstrap Multiple Image Upload with Preview and Delete | ImagesLoader

ImagesLoader is a standard bootstrap image upload plugin that provides an easy-to-use and nice-looking interface for uploading multiple images to a web server. Must Read: HTML 5…


A Lightweight jQuery Plugin for Animating Split-Flap Displays | fallblatt

fallblatt is a lightweight jQuery plugin for animating split screens. This jQuery plugin allows you to include such offers in your web application. Everything from virtual departure…


Dark & Light Switch Mode Toggle for Bootstrap 5

Switching to dark mode is done by toggling HTML tags that include -dark or -light as a category. It is made by manipulating the DOM with JavaScript. The text color also changes depending…


jQuery Plugin for Countdown Timer on HTML Page | SyoTimer

yoTimer jQuery plugin allows you to create digital style countdowns/periodic timers on the webpage, with callbacks support and timezone/translation customization. Features Periodic count with the specified period…


Dynamic, Data-driven Periodic Table built with Vue.js

Periodicity is a dynamic, data-driven periodic table created with Vue.js that uses D3 animations and graphs to show the beauty of periodic trends. Built With vue.js (component…