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);
