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

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

安装

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

npm install filterizr
bower install filterizr                  
                

使用方法

在页面中引入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);                  
                

filterizr插件的github网址为：https://github.com/giotiskl/Filterizr

在线预览    源码下载