Filterable Masonry Grid In JavaScript – sortableJs

Category: Javascript , Layout | August 2, 2018
Author: TristanBlg
Views Total: 487
Official Page: Go to website
Last Update: August 2, 2018
License: MIT

Preview:

Filterable Masonry Grid In JavaScript – sortableJs

Description:

sortableJs 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:

Download and insert the sortableJs’ files into the document.

<link rel="stylesheet" href="/path/to/sortable.min.css">
<script src="/path/to/sortable.min.js"></script>

Categorize your grid items using the ‘data-sjsel’ attribute:

<div id="sortable" class="sjs-default">
  <div data-sjsel="javascript">
    Item 1
  </div>
  <div data-sjsel="css">
    Item 2
  </div>
  <div data-sjsel="html">
    Item 3
  </div>
  <div data-sjsel="css">
    Item 4
  </div>
  <div data-sjsel="javascript">
    Item 5
  </div>
  ...
</div>

Create links to filter through the grid items.

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

Initialize the sortableJs and done.

document.querySelector('#sortable').sortablejs()

Possible options to customize the masonry grid.

document.querySelector('#sortable').sortablejs({

  // filter links
  links: document.querySelectorAll('[data-sjslink]'),

  // 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
  }
  
})

You Might Be Interested In:

Leave a Reply