jQuery筛选过滤插件Filterizr.js

简介

Filterizr 是一款筛选过滤jquery插件，它提供了多重筛选过滤方式，能够满足你的不同需求。并且使用了 CSS3 过滤效果，使用户体验更优秀。

浏览器兼容

IE10+	Edge	Chrome	Firefox	Opera	Safari

使用方法

1、引入文件

<link rel="stylesheet" href="css/jkresponsivegallery.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.filterizr.js"></script>

2、HTML

<div class="dowebok">
    <div class="filtr-item" data-category="1, 5">
        <img src="img/city_1.jpg" alt="">
    </div>
    <div class="filtr-item" data-category="2, 5">
        <img src="img/nature_2.jpg" alt="">
    </div>
    <div class="filtr-item" data-category="1, 4">
        <img src="img/city_3.jpg" alt="">
    </div>
    ...
</div>

为标签加上 data-category 属性，用于指定分类 id，可以有多个分类，用都好“,”分开。

如果需要在额外的标签中加入控制，需要用到其他的 data 属性，如：

1）单选：

<li data-filter="all">全部</li>
<li data-filter="1">分类1</li>
<li data-filter="2">分类2</li>
<li data-filter="3">分类3</li>

2）多选：

<li data-multifilter="1">代码</li>
<li data-multifilter="2">素材</li>
<li data-multifilter="3">模板</li>

3）排序：

<li class="shuffle-btn" data-shuffle>随机</li>
<li class="sort-btn" data-sortAsc>顺序</li>
<li class="sort-btn" data-sortDesc>倒序</li>

4）搜索：

<input class="keyword" placeholder="请输入关键字" data-search>

3、JavaScript

$('.dowebok').filterizr();

配置

属性

预览地址：https://www.umming.com/demo/Filterizr/