filtery

A simple JavaScript to make filterable masonry layouts

Getting Started

1. Installation
2. Basic Usage
3. Options
4. JavaScript Events

Installation

You can install this filtery.js using NPM, with the following command,

$ npm install filtery

Refer to the releases page to download it manually.

Basic Usage

With jQuery,

$(selector).filtery( [options] );

With Vanilla JavaScript,

var filtery = new Filtery(document.querySelector(selector) [, options] );

where selector is a string containing the selector expression for the grid object, and options (optional) is a JSON object containing custom settings (Refer to Options).

In HTML,

<ul id="filter">
    <li data-filter="all"> <a href="#"> <...> </a> <li>
    <li data-filter="example"> <a href="#"> <...> </a> <li>
    <...>
</ul>

<div id=selector>
    <div data-category="example" class="item"> <...> </div>
    <...>
</div>

Options

Here is a list of the available options with their default values,

With jQuery,

$("#filtery").filtery({
    itemSelector: '.item',
    columns: 3,
    gap: 10,
    animationDuration: 400,
    responsive: {}
});

With Vanilla JavaScript,

var filtery = new Filtery(document.querySelector("#filtery"), {
    itemSelector: '.item',
    columns: 3,
    gap: 10,
    animationDuration: 400,
    responsive: {}
});

• itemSelector: the selector expression for the elements of the grid.
• columns: the number of columns in the grid.
• gap: the gap between each item in the grid (in px), basically the margin.
• animationDuration: the duration of the animation of the items in the grid.
• responsive: contains the media queries for a responsive grid. It can contain all of the above options.
  • Example:

    responsive: {
        1280: {
            columns: 3
        },
        991: {
            columns: 2
        },
        0: {
            columns: 1
        }
    }

JavaScript Events

To fix some issues with other plugins that register the offsets of elements below a grid before the items are ordered (like Waypoints or AOS), two events were added that get dispatched on Filtery elements: filtery:load, that triggers when the grid is loaded and the items are ordered, and filtery:resize, that triggers when the grid is refreshed after resizing the window.

Example:

$("#filtery").on('filtery:load', function () {
    console.log("Filtery grid has loaded");
});

$("#filtery").on('filtery:resize', function () {
    console.log("Filtery grid has been resized");
});