Filterizr 与 jQuery 集成作为插件使用的完整教程【免费下载链接】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 是一款轻量级的 JavaScript 图片筛选库它利用 CSS3 过渡动画对响应式图片画廊进行排序、随机洗牌和分类筛选同时还可以作为 jQuery 插件直接使用。本教程将手把手教你完成 Filterizr 与 jQuery 集成从安装引入到 API 调用快速打造带筛选、搜索、排序功能的图片画廊。什么是 Filterizr jQuery 插件Filterizr 由 TypeScript 编写、零依赖运行时仅依赖 imagesloaded核心能力是通过 CSS3 transitions 让图片卡片在切换分类时拥有流畅的动画效果。它支持两种使用方式原生 JavaScript 模式直接new Filterizr(selector)使用jQuery 插件模式调用$(.container).filterizr(filter, city)链式调用符合 jQuery 习惯作为 jQuery 插件时Filterizr 会自动扩展$.fn.filterizr方法所有 API 都可以通过它来触发底层实现见 installAsJQueryPlugin.ts。Filterizr 与 jQuery 集成的安装方法方法一npm / yarn 安装推荐npm install filterizr jquery在模块化项目中使用installAsJQueryPlugin静态方法完成集成import $ from jquery; import Filterizr from filterizr; // 将 filterizr 方法挂载到 $.fn 原型上 Filterizr.installAsJQueryPlugin($); $(.filtr-container).filterizr({ layout: packed });方法二script 标签直接引入构建产物dist/目录中提供三个文件jQuery 集成请使用jquery.filterizr.min.jsjQuery 插件版自动检测并扩展全局 jQuery 对象vanilla.filterizr.min.js原生版暴露全局Filterizrfilterizr.min.jsCommonJS/ES6 模块入口script srcjquery.min.js/script script srcjquery.filterizr.min.js/script注意必须在 jQuery 之后引入插件初始化逻辑见 index.jquery.ts。快速搭建三步完成图片筛选第一步准备 HTML 结构div classfiltr-container div classfiltr-item>$(.filtr-container).filterizr({ gutterPixels: 15, // 卡片间距 layout: sameWidth, // 布局方式 controlsSelector: .fltr-controls });Filterizr 插件常用 API 调用清单方法作用示例filter按分类筛选$(.filtr-container).filterizr(filter, city)toggleFilter多选切换筛选...filterizr(toggleFilter, nature)sort排序...filterizr(sort, sort, desc)shuffle随机打乱...filterizr(shuffle)search关键词搜索...filterizr(search, 夜)insertItem/removeItem动态增删条目...filterizr(insertItem, node)setOptions动态更新配置...filterizr(setOptions, { gutterPixels: 30 })destroy销毁实例...filterizr(destroy)以上 API 的完整定义与参数说明可查看 Filterizr.ts。常用配置参数与布局模式Filterizr 的默认配置集中在 defaultOptions.ts新手最常用的是layoutsameSize默认、sameWidth、sameHeight、packed、horizontal、vertical六种布局animationDuration动画时长秒delay与delayMode条目动画延迟与模式progressive/alternateeasingCSS 缓动函数filterOutCss/filterInCss自定义筛选进出场动画如缩放、淡出spinner加载动画开关及样式callbacksonInit、onFilteringStart、onFilteringEnd等生命周期回调$(.filtr-container).filterizr({ layout: packed, animationDuration: 0.6, delay: 50, delayMode: alternate, filterOutCss: { opacity: 0, transform: scale(0.5) }, spinner: { enabled: true, fillColor: #2184D0 } });常见问题与调试技巧插件未生效检查是否在 jQuery 之后引入jquery.filterizr.min.js且容器与条目的 class 命名正确。动画不出现图片未加载完成时布局会等待可在onInit回调中确认初始化时机。多实例共存为每个容器指定独立的controlsSelector避免控件事件互相干扰。自定义排序利用data-sort属性存放任意字符串或数值再通过sortAPI 指定排序字段。总结Filterizr 与 jQuery 集成只需三行代码却能带来排序、洗牌、搜索、筛选一整套画廊交互能力动画基于 CSS3 transitions移动端表现同样出色。结合setOptions动态更新和各类回调事件你完全可以把它扩展成图片管理后台、作品集展示页的核心组件。快在你的项目中试一试让图片画廊活起来吧【免费下载链接】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），仅供参考
