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