jQuery篩選列表過濾插件Filterizr

插件描述：Filterizr 是一款基于 jQuery 的篩選過濾插件，它提供了多重篩選過濾方式，能夠滿足你的不同需求。并且使用了 CSS3 過濾效果，使用戶體驗更優(yōu)秀。

使用方法

1、引入文件

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

2、HTML

<div class="jq22">
    <div class="filtr-item" data-category="1, 5">
        <img src="img/a1.png" alt="">
    </div>
    <div class="filtr-item" data-category="2, 5">
        <img src="img/a2.png" alt="">
    </div>
    <div class="filtr-item" data-category="1, 4">
        <img src="img/a3.png" alt="">
    </div>
    ...
</div>

為標(biāo)簽加上 data-category 屬性，用于指定分類 id，可以有多個分類，用都好“,”分開。

如果需要在額外的標(biāo)簽中加入控制，需要用到其他的 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>隨機(jī)</li>
<li class="sort-btn" data-sortAsc>順序</li>
<li class="sort-btn" data-sortDesc>倒序</li>

4）搜索：

<input class="keyword" placeholder="請輸入關(guān)鍵字" data-search>

3、JavaScript

$('.jq22').filterizr();

配置

屬性