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

Fast and simple javascript plugin to filter elements from a masonry grid.
https://github.com/bentzibentz/luni-masonry

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/bentzibentz/luni-masonry
• Owner: bentzibentz
• License: mit
• Created: 2021-09-29T06:07:56.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2022-09-03T08:21:51.000Z (over 2 years ago)
• Last Synced: 2024-11-10T23:59:35.447Z (about 2 months ago)
• Language: JavaScript
• Size: 36.1 MB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  

  

  

  

  

  



# Luni Masonry

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

Installation

---------

```

npm i luni-masonry

```

Or download the [latest release](https://github.com/bentzibentz/luni/releases).

Docs

---------

#### Import:

```js

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.

```html



  


     [...] 

  

  


     [...] 

  

  


     [...] 

  

  


     [...] 

  





  

  
 [...] 

  
 [...] 

  
 [...] 

  
 [...] 

  
 [...] 

  
 [...] 



```


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

```js

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/](https://bentzibentz.github.io/luni-masonry/)

Inspired and based on

---------

Luni Masonry is based on the amazing [Isolde](https://github.com/TristanBlg/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) license.