Filterizr 动态增删项目insertItem 与 removeItem 完整实战教程【免费下载链接】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 过渡动画transition的 JavaScript 响应式画廊插件能够为图片网格提供筛选、排序、搜索与随机排列等强大功能纯 TypeScript 编写、零依赖、开箱即用。很多新手只会用它的 filter 方法做分类筛选却不知道它还能通过 insertItem 与 removeItem 两个 API 在不刷新页面的前提下动态增删项目。这篇文章为你带来一份从原理到实战的完整教程覆盖原生 JavaScript 与 jQuery 两种调用方式帮你彻底玩转 Filterizr 动态增删项目。为什么需要动态增删项目静态画廊只能靠刷新页面来更新内容而真实的业务场景往往需要实时交互️ 用户上传新图片后立即插入画廊并自动重排️ 删除不再需要的项目剩余卡片平滑补位 后台推送新内容前端即时响应展示Filterizr 的 insertItem 与 removeItem 恰好解决这些需求插入或删除后会自动重新计算布局并播放过渡动画交互体验非常流畅。Filterizr 快速安装与初始化在开始动态增删之前先准备好运行环境。通过 npm 安装即可npm install filterizr然后在页面中准备一个符合规范的画廊容器每个项目都要带上data-category分类属性和data-sort排序属性div classfiltr-container div classfiltr-item>import Filterizr from filterizr; const filterizr new Filterizr(.filtr-container, { controlsSelector: .fltr-controls, gutterPixels: 15, });对应源码可在src/Filterizr/Filterizr.ts中查看默认选项定义位于src/FilterizrOptions/defaultOptions.ts。深入 insertItem动态添加项目的正确姿势insertItem 的作用是把一个新的 DOM 节点作为画廊项目插入网格并自动触发重排与动画。insertItem 方法与参数insertItem(node: HTMLElement): Promisevoid它接收一个 HTMLElement 节点作为参数返回值是 Promise。在src/FilterContainer/FilterContainer.ts的内部实现中流程是这样的先克隆节点并移除内联样式再追加到容器中并包装成 FilterItem最后等待图片加载完成后重新渲染整个网格。最简单的插入示例// 构造一个新项目 const newNode document.createElement(div); newNode.className filtr-item; newNode.setAttribute(data-category, 2); newNode.innerHTML img srcnature.jpg alt自然风景 /; await filterizr.insertItem(newNode); console.log(新项目已插入并完成重排);因为 insertItem 是异步方法记得使用await这样才能在插入完成后安全地执行后续操作。深入 removeItem删除项目的两个要点removeItem 则负责把指定节点从画廊中移除并让剩余项目自动补位。removeItem 方法与参数removeItem(node: HTMLElement): void它同样接收一个 HTMLElement 节点作为参数。内部实现src/FilterContainer/FilterContainer.ts会先从 FilterItems 数组里剔除对应项再调用removeChild删除 DOM 节点最后触发重排。注意这里传入的必须是画廊容器内的真实 DOM 节点克隆出来的副本是删不掉的。最简单的删除示例const itemToRemove document.querySelector(.filtr-item.special); filterizr.removeItem(itemToRemove); console.log(项目已移除画廊自动重排);删除后剩余项目会平滑补位这一动画效果由 CSS3 transition 自动完成。jQuery 插件方式调用 insertItem 与 removeItem如果你的项目使用 jQueryFilterizr 也提供了插件封装见src/Filterizr/installAsJQueryPlugin.ts调用方式同样简单Filterizr.installAsJQueryPlugin($); // 动态添加项目 $(.filtr-container).filterizr(insertItem, newNode); // 动态移除项目 $(.filtr-container).filterizr(removeItem, oldNode);jQuery 模式下所有方法都会返回this方便继续链式调用其他 API比如filter、sort等。实战一个可运行的动态增删示例下面把两个 API 组合起来做一个点击按钮添加 / 移除项目的小案例const container document.querySelector(.filtr-container); function buildItem(category, src, desc) { const div document.createElement(div); div.className filtr-item; div.setAttribute(data-category, category); div.setAttribute(data-sort, desc); div.innerHTML img src${src} alt${desc}span${desc}/span; return div; } // 添加项目 document.querySelector(#btn-add).addEventListener(click, async () { const node buildItem(1, city.jpg, Busy streets); await filterizr.insertItem(node); }); // 移除最后一个项目 document.querySelector(#btn-remove).addEventListener(click, () { const last container.querySelector(.filtr-item:last-child); if (last) filterizr.removeItem(last); });完整的示例页面可以参考仓库中的demo/index.html它演示了 sameHeight、sameWidth、packed 等六种布局配套图片位于demo/img/目录可以直接拿来测试。如果需要获取完整示例代码可以克隆仓库git clone https://gitcode.com/gh_mirrors/fi/filterizr常见问题与避坑指南新手在使用动态增删时最容易踩这几个坑⚠️ 新插入的项目必须带有data-category属性否则无法被filter正确筛选⚠️ insertItem 是异步方法不await可能导致后续逻辑提前执行⚠️ removeItem 传入的节点必须是容器内的真实节点克隆节点是删不掉的⚠️ 插入的节点不要预先写内联 styleFilterizr 会主动移除它再接管布局⚠️ 如果容器是通过gridItemsSelector自定义的请确保新节点同样符合该选择器总结Filterizr 的 insertItem 与 removeItem 让响应式画廊动态增删项目变得异常简单添加时克隆节点、等待图片加载、自动重排删除时移除节点、剩余卡片平滑补位。无论你使用原生 JavaScript 还是 jQuery掌握这两个 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/filterizr创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考