jQuery筛选过滤插件Filterizr演示

Filterizr 是一款功能强大的筛选过滤插件，它提供了多重筛选过滤方式，配合了css3的动画效果。

分类：表单代码 > 搜索框难易：中级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

图片列表 data-category则是分类id

<div class="sucaihuo">
    <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>

默认效果

$('.sucaihuo').filterizr();

Filterizr.js筛选API参数

参数	描述	默认值
animationDuration	动画持续时间，单位为秒	0.5
callbacks	回调函数	-
delay	延迟，单位为毫秒	0
delayMode
easing	动画方式	ease-out
filter	指定筛选/过滤某分类	0
filterOutCss	”淡出“的样式	-
filterInCss	”淡入“的样式	-
layout	布局方式，可选 packed / horizontal / vertical / sameHeight / sameWidth / sameSize	sameSize
setupControls	建立控制，设置为 true 时，对应的含有 data 属性（如 data-filter=”1″）的标签才能触发控制	true

jQuery筛选过滤插件Filterizr演示

图片列表 data-category则是分类id

默认效果

Filterizr.js筛选API参数

delayMode