Filterizr API 完全参考所有方法、选项与配置项一网打尽【免费下载链接】filterizr:sparkles: Filterizr is a JavaScript library that sorts, shuffles and filters responsive galleries using CSS3 transitions :sparkles:项目地址: https://gitcode.com/gh_mirrors/fi/filterizrFilterizr 是一个基于 CSS3 过渡动画的轻量级 JavaScript 画廊筛选库用于对响应式图片画廊进行排序、洗牌和筛选。无论你是刚接触 Filterizr 的新手还是想深入掌握其 Filterizr API 的进阶开发者这篇文章都会为你整理一份完整参考从所有公开方法、全部选项到每个配置项的含义与默认值一网打尽。它零依赖、基于 TypeScript 编写还支持 jQuery 插件形式调用非常适合为作品集、商城、博客分类筛选等场景快速搭建筛选网格。Filterizr 是什么为什么值得用它做图片筛选在动手写代码之前先花 30 秒理解 Filterizr 的核心价值。它不是一个笨重的框架而是一个专注于「筛选 布局动画」的独立库零依赖不依赖 jQuery当然也可以作为 jQuery 插件使用单独引入即可运行纯 CSS3 过渡动画筛选、排序、洗牌都通过 CSS3 transition 实现性能出色移动端表现流畅6 种内置布局等尺寸、等高、等宽、瀑布流packed、水平、垂直覆盖常见画廊场景支持多条件筛选可以传入字符串或数组配合 AND/OR 逻辑做多标签组合筛选内置加载动画 Spinner图片未加载完成时自动展示 Loading 动画体验更完整。项目结构非常清晰核心实现位于 src/Filterizr/Filterizr.ts选项系统位于 src/FilterizrOptions/FilterizrOptions.ts所有默认值定义在 src/FilterizrOptions/defaultOptions.ts。快速上手三步完成 Filterizr 初始化的最简单方法如果你只想尽快跑起来记住这三步即可引入vanilla.filterizr.min.js纯 JS 版或jquery.filterizr.min.jsjQuery 版写好 HTML 结构外层容器加filtr-container类每个筛选项加filtr-item类并用data-category标注分类一行代码初始化new Filterizr(.filtr-container)。如果通过 npm 安装可以用 ES6 方式导入import Filterizr from filterizr; const filterizr new Filterizr(.filtr-container, { layout: packed, animationDuration: 0.6, });入口导出定义在 src/index.ts默认导出就是Filterizr主类。Filterizr 所有方法详解8 个公开 API 逐一说明Filterizr 主类公开了 8 个方法下面按使用频率逐个讲解源码均可对照 src/Filterizr/Filterizr.ts。1. filter(category)核心筛选方法filter是最核心的方法按分类筛选网格中的项目filterizr.filter(all); // 显示全部 filterizr.filter(nature); // 只显示 nature 分类 filterizr.filter([nature, city]); // 多分类参数可以是字符串、数字也可以是字符串数组。传入数组时配合multifilterLogicalOperator选项决定是 AND 还是 OR 逻辑。2. toggleFilter(filter)多选模式下切换筛选条件适合做「多标签组合筛选」的场景每次调用都会切换某个筛选条件的开关状态filterizr.toggleFilter(nature); filterizr.toggleFilter(city);3. search(searchTerm)在网格中搜索文本为筛选增加一层「文本搜索」筛选出所有包含指定关键词的项搜索词不区分大小写filterizr.search(mountain);4. sort(sortAttr, sortOrder)按属性排序按指定属性排序第二个参数控制升序asc或降序descfilterizr.sort(data-price, desc); // 按价格降序 filterizr.sort(); // 默认按 index 升序5. shuffle()一键洗牌随机打乱网格中项目的顺序并保证位置确实发生变化适合做「随机推荐」「发现」等趣味功能。6. insertItem(node) / removeItem(node)动态增删项目在运行时向网格插入或移除一个 DOM 节点插入是异步方法会等待图片加载完成后再重新布局await filterizr.insertItem(newItemNode); filterizr.removeItem(oldItemNode);7. setOptions(newOptions)运行时更新配置动画中途修改配置也完全支持会先做校验再应用并且会自动处理回调解绑、过渡样式更新等细节filterizr.setOptions({ gutterPixels: 20, easing: ease-in-out });8. destroy()销毁实例彻底销毁 Filterizr 实例解绑容器事件、窗口 resize 监听和控件事件防止内存泄漏。作为 jQuery 插件调用 Filterizr 方法Filterizr 可以无缝作为 jQuery 插件使用通过静态方法installAsJQueryPlugin注入见 src/index.jquery.tsimport $ from jquery; import Filterizr from filterizr; Filterizr.installAsJQueryPlugin($); $(.filter-container).filterizr(filter, nature); $(.filter-container).filterizr(shuffle);方法名与纯 JS 版一一对应把参数直接传给字符串方法名即可。Filterizr 选项全面解析每个配置项的作用与默认值所有配置项的默认值集中定义在 src/FilterizrOptions/defaultOptions.ts类型定义可参考 src/types/interfaces/BaseOptions.ts。下面按类别整理成速查表。动画与过渡相关配置项选项类型默认值说明animationDurationnumber0.5动画持续时间秒想让动效更丝滑可以调大delaynumber0每个项目动画的额外延迟秒配合 delayMode 实现交错效果delayModeprogressive/alternateprogressiveprogressive 逐项递增延迟alternate 交替递增视觉更生动easingstringease-out过渡缓动函数支持任何合法的 CSS3 transition-timing-functionconst filterizr new Filterizr(.filtr-container, { animationDuration: 0.8, delay: 0.05, delayMode: alternate, easing: cubic-bezier(0.25, 0.1, 0.25, 1), });布局与结构相关配置项选项类型默认值说明layoutstringsameSize布局模式可选 6 种见下gutterPixelsnumber0项目之间的间距像素gridItemsSelectorstring.filtr-item网格项目的 CSS 选择器controlsSelectorstring筛选控件的 CSS 选择器配合 setupControls 使用6 种布局模式一览枚举定义在 src/config/layout.tssameSize所有项目等尺寸默认布局sameHeight等高但宽度自适应sameWidth等宽但高度自适应packed瀑布流式紧凑布局最常用的画廊模式horizontal水平排列vertical垂直排列。const filterizr new Filterizr(.filtr-container, { layout: packed, gutterPixels: 16, });筛选逻辑相关配置项选项类型默认值说明filterstring / string[]all初始筛选分类数组配合下方逻辑符做多选multifilterLogicalOperatoror/andor多分类筛选时的逻辑or 满足任一即显示and 需同时满足searchTermstring初始搜索词setupControlsbooleantrue是否自动为筛选控件绑定事件filterOutCssobject{opacity: 0, transform: scale(0.5)}项目被筛出时的 CSS 样式filterInCssobject{opacity: 1, transform: scale(1)}项目被筛入时的 CSS 样式想自定义过渡效果改filterOutCss和filterInCss即可例如实现「模糊淡出」const filterizr new Filterizr(.filtr-container, { filterOutCss: { opacity: 0, transform: scale(0.5), filter: blur(10px) }, filterInCss: { opacity: 1, transform: scale(1), filter: blur(0) }, });回调函数8 个生命周期事件回调类型定义在 src/types/interfaces/RawOptionsCallbacks.ts总共有 8 个回调触发时机onInit初始化完成、图片加载完毕onFilteringStart/onFilteringEnd筛选动画开始 / 结束onShufflingStart/onShufflingEnd洗牌动画开始 / 结束onSortingStart/onSortingEnd排序动画开始 / 结束onTransitionEnd每次 CSS 过渡结束const filterizr new Filterizr(.filtr-container, { callbacks: { onFilteringStart: () console.log(筛选开始), onFilteringEnd: () console.log(筛选结束), }, });Spinner 加载动画配置项图片较多时建议开启内置加载动画配置结构见 src/types/interfaces/SpinnerOptions.ts选项类型默认值说明spinner.enabledbooleanfalse是否启用加载动画spinner.fillColorstring#2184D0动画颜色spinner.stylesobject{height:75px, width:75px, ...}覆盖 Spinner 的 CSS 样式const filterizr new Filterizr(.filtr-container, { spinner: { enabled: true, fillColor: #e74c3c }, });一份完整的 Filterizr 配置示例组合全部核心选项最后把前面讲到的知识组合起来写一个「作品集画廊」级别的完整配置涵盖筛选、搜索、排序、瀑布流布局与回调import Filterizr from filterizr; const filterizr new Filterizr(.portfolio-grid, { animationDuration: 0.6, delay: 0.04, delayMode: alternate, easing: ease-in-out, layout: packed, gutterPixels: 20, filter: all, multifilterLogicalOperator: and, setupControls: true, controlsSelector: .filter-controls, spinner: { enabled: true, fillColor: #2184D0 }, filterOutCss: { opacity: 0, transform: scale(0.6), filter: blur(6px) }, filterInCss: { opacity: 1, transform: scale(1), filter: blur(0) }, callbacks: { onInit: () console.log(Filterizr 已初始化), onFilteringStart: () console.log(筛选开始), onFilteringEnd: () console.log(筛选结束), }, }); // 动态操作示例 filterizr.search(nature); filterizr.sort(data-date, desc); filterizr.toggleFilter(featured);结语从 API 参考到实战至此Filterizr 的完整 API 已经全部梳理完毕——8 个公开方法、5 大类配置项、8 个生命周期回调和 6 种布局模式都已一网打尽。想深入阅读源码推荐从 src/Filterizr/Filterizr.ts 的主类开始再到 src/FilterizrOptions/FilterizrOptions.ts 了解选项校验逻辑最后浏览 demo/index.html 查看一个可运行的完整示例。上手成本极低、配置自由度高无论你是想快速实现图片筛选的新手还是追求精细动画控制的进阶开发者Filterizr 都是一个值得放进工具箱的选择。【免费下载链接】filterizr:sparkles: Filterizr is a JavaScript library that sorts, shuffles and filters responsive galleries using CSS3 transitions :sparkles:项目地址: https://gitcode.com/gh_mirrors/fi/filterizr创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考