Smooth Data Filter Animation In jQuery - filterData.js

Just another in-page data filtering plugin for jQuery that uses CSS classes and HTML5 data attributes to filter a group of web contents on the page, with a smooth shuffle effect based on jQuery animate() method. This plugin is designed for your portfolio which contains a large number of images.

How to use it:

1. Create a group of elements and categorize them using CSS classes as these:

<div class="portfolios">
  <div class="web-design">
    Web Design Element
  </div>
  <div class="web-design web-development">
    Web Development & Web Design Element
  </div>
  <div class="web-design">
    Web Design Element
  </div>
  <div class="web-design">
    Web Design Element
  </div>
  <div class="web-development">
    Web Development Element
  </div>
  ...
</div>

2. Create the filter buttons on the webpage.

<button type="button" class="filter-btn" data-filter="all">All</button>
<button type="button" class="filter-btn" data-filter=".web-design">Web Design</button>
<button type="button" class="filter-btn" data-filter=".web-development">Web Development</button>

3. Initialize the plugin with some options.

$('.portfolios').filterData({
  aspectRatio: '8:5',   
  nOfRow : 3, // the number of rows
  itemDistance : 0
});

4. More configuration options with default values.

$('.portfolios').filterData({
  containerWidth : 0,
  containerHeight : 0,
  nOfRow : 0,
  nOfColumn : 0,
  aspectRatio : '1:1',
  containerMargin : '0px auto',
  itemWidth : 0,
  itemHeight : 0,
  itemDistance : 20,
  animationSpeed : 300,
  containerAnimationDelay : 500,
  allContainerAnimationSpeed : 500,
  easing                      : 'swing',
  margin : 0,
  filterController : '.filter-btn',
  responsive : [
    {
        breakpoint : 1200,
        containerWidth : 1170,
        settings : {
            nOfRow : 3,
            nOfColumn : 3
        }
    },
    {
        breakpoint : 992,
        containerWidth : 970,
        settings : {
            nOfRow : 3,
            nOfColumn : 3
        }
    },
    {
        breakpoint : 768,
        containerWidth : 750,
        settings : {
            nOfRow : 2,
            nOfColumn : 2
        }
    }
  ]
});

---

This awesome jQuery plugin is developed by maab16. For more Advanced Usages, please check the demo page or visit the official website.