Luni Masonry

Fast and simple javascript plugin to filter elements from a masonry grid.

Installation

npm i luni-masonry

Or download the latest release.

Docs

Import:

import LuniMasonry from 'luni-masonry';
import 'luni-masonry/dist/luni-masonry.min.css';

const luni = new LuniMasonry();

Usage:

1. Create links (a, div, etc.) which will have the attribute data-luni-link with a filter value.
2. Wrap your items with container elements (li, div, etc.) which will have the attribute data-luni-el with an value corresponding to the filter values, if an item matches multiple filter values you can user comma separated strings like data-luni-el="car,street".
3. Wrap your blocks with a container (ul, div, etc.) that have a className class="luni-default" and an id id="luni".
4. To add a filter reset link just add an element with the data-luni-link="all" attribute to your links.

<!-- 1st step -->
<ul>
  <li>
    <a data-luni-link="all"> [...] </a>
  </li>
  <li>
    <a data-luni-link="car"> [...] </a>
  </li>
  <li>
    <a data-luni-link="bike"> [...] </a>
  </li>
  <li>
    <a data-luni-link="street"> [...] </a>
  </li>
</ul>

<!-- 3st step -->
<div id="luni" class="luni-default">

  <!-- 2nd step -->
  <div data-luni-el="car"> [...] </div>
  <div data-luni-el="car,street"> [...] </div>
  <div data-luni-el="street"> [...] </div>
  <div data-luni-el="bike,street"> [...] </div>
  <div data-luni-el="car,street"> [...] </div>
  <div data-luni-el="bike"> [...] </div>
</div>

Change settings:

You can config the LuniMasonry Class settings:

1. active set custom active class for selected filter element
2. margin set a custom gap size between the elements
3. responsive set custom breakpoints and number of columns
4. fadeDuration set custom animation durations in milliseconds

Example:

const luni = new LuniMasonry({
    // active class
    active: 'is-activated',
    // in pixels
    margin: 18,
    // for responsive
    responsive: {
        1024: {
            columns: 4,
        },
        980: {
            columns: 3,
        },
        480: {
            columns: 2,
        },
        0: {
            columns: 1,
        },
    },
    // fade in/out duration
    fadeDuration: {
        in: 300,
        out: 50,
    },
});

Demo

https://bentzibentz.github.io/luni-masonry/

Inspired and based on

Luni Masonry is based on the amazing Isolde lib. Unfortunately, it looks like the library will not be developed any further since 2018. That's why I decided to adapt the concept to develop and improve it further.

License

Copyright (c) 2021 Fabian Bentz. Released under the MIT license.