Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序，按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。

在线预览 下载

Filterizr的特点还有：

• 轻量级，压缩后的版本仅10.5k。
• 响应式设计。
• 支持移动设备，已为移动设备做了优化，显示更流畅。
• 支持IE10+以上的所有现代浏览器。

安装

可以通过npm或bower来安装Filterizr插件。

npm install filteriz
bower install filteriz

使用方法

在页面中引入jquery和jquery.filterizr.min.js文件。

<script src="js/jquery.min.js"></script>
<script src="js/jquery.filterizr.min.js"></script>

HTML结构
要使用Filterizr插件你必须有一个图片画廊。为每一张图片的容器添加filtr-item class类，用data-category属性来为图片进行分类，多个分类之间使用逗号分隔。如需要排序，需要添加data-sort属性。

<div class="filtr-container">
  <div class="filtr-item" data-category="1" data-sort="value">
    <img src="img/sample.jpg" alt="sample">
  </div>
  <div class="filtr-item" data-category="2, 1" data-sort="value">
    <img src="img/sample.jpg" alt="sample">
  </div>
  <div class="filtr-item" data-category="1, 3" data-sort="value">
    <img src="img/sample.jpg" alt="sample">
  </div>
</div>

然后你还需要设置一些控制按钮。

<ul>
  <!-- For filtering controls add -->
  <li data-filter="all"> All items </li>
  <li data-filter="1"> Category 1 </li>
  <li data-filter="2"> Category 2 </li>
  <li data-filter="3"> Category 3 </li>
  <!-- For a shuffle control add -->
  <li data-shuffle> Shuffle items </li>
  <!-- For sorting controls add -->
  <li data-sortAsc> Ascending </li>
  <li data-sortDesc> Descending </li>
</ul>
<!-- To choose the value by which you want to sort add -->
<select data-sortOrder>
  <option value="domIndex"> Position </option>
  <option value="sortData"> Custom Data </option>
</select>

初始化插件
在页面DOM元素加载完毕之后，通过filterizr方法来初始化插件。

var filterizd = $('.filtr-container').filterizr({
   
   //配置参数
});                 
filterizr插件的可用配置参数如下：

//Default options
var options = {
   
   animationDuration: 0.5, //in seconds
   filter: 'all', //Initial filter
   callbacks: {
    
      onFilteringStart: function() {
    },
      onFilteringEnd: function() {
    },
      onShufflingStart: function() {
    },
      onShufflingEnd: function() {
    },
      onSortingStart: function() {
    },
      onSortingEnd: function() {
    }
   },
   delay: 0, //Transition delay in ms
   delayMode: 'progressive', //'progressive' or 'alternate'
   easing: 'ease-out',
   filterOutCss: {
    //Filtering out animation
      opacity: 0,
      transform: 'scale(0.5)'
   },
   filterInCss: {
    //Filtering in animation
      opacity: 0,
      transform: 'scale(1)'
   },
   layout: 'sameSize', //See layouts
   selector: '.filtr-container',
   setupControls: true
} 
//You can override any of these options and then call...
var filterizd = $('.filtr-container').filterizr(options);
//If you have already instantiated your Filterizr then call...
filterizd.filterizr('setOptions', options);