用原生JS实现分类过滤需为图片设data-category属性，按钮设对应data-filter值，通过classList.toggle控制.is-hidden类（CSS定义display:none），避免直接操作style；用CSS Grid布局并处理图片尺寸与加载时机。
用 JavaScript 实现分类过滤，别碰 jQuery
纯 HTML + CSS + 原生 JS 就能搞定，不需要任何框架。核心是给每张图加 data-category 属性，再用 document.querySelectorAll 动态显示/隐藏。
常见错误是直接用 display: none 切换所有元素，结果滚动位置丢失、图片懒加载失效、SEO 友好性下降。正确做法是用 classList.toggle 控制一个隐藏类（比如 is-hidden），CSS 里统一定义 .is-hidden { display: none; }。
- 每个
<figure>或<div class="gallery-item">必须带data-category="landscape"这类属性 - 分类按钮的
data-filter值要和图片的data-category完全一致（大小写敏感） - “全部”按钮建议用
data-filter="*"，JS 里判断这个值就跳过过滤逻辑 - 过滤前先清除所有项的
is-hidden类，再对不匹配的加上——避免残留
CSS 布局用 Grid，别用 float 或 inline-block
响应式画廊用 display: grid 最稳，grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) 能自动适配列数，比媒体查询写一堆断点更可靠。
容易踩的坑是没设 grid-gap 导致图片贴太近，或者忘了给图片加 width: 100% 和 height: auto，导致拉伸变形。另外，.is-hidden 类必须写在 Grid 容器的子元素上，不能作用于容器本身，否则会破坏网格流。
立即学习“前端免费学习笔记（深入）”；
- 图片外层容器（如
<figure>）设margin: 0，避免默认样式干扰 Grid 对齐 - 如果图片高度差异大，加
align-items: start防止底部错位 - 移动端小屏下可改用
minmax(220px, 1fr)，避免单列太窄
点击分类时，避免重复绑定事件监听器
把事件监听器写在 DOMContentLoaded 里，但只绑一次——不是每次过滤都重新 addEventListener。否则点 5 次“风景”，就会触发 5 次过滤逻辑，性能掉得明显，还可能造成状态混乱。
典型错误代码：filterBtn.addEventListener('click', () => { /* 这里又绑了一次 */ })。应该把过滤函数抽成独立函数，比如叫 filterGallery，然后在监听器里调用它。
- 用
event.target.dataset.filter拿当前按钮的筛选值，别用innerHTML或textContent解析 - 过滤前加
document.querySelectorAll('.gallery-item').forEach(item => item.classList.remove('is-hidden'))清场 - 用
item.dataset.category !== filterValue && filterValue !== '*'判断是否隐藏，注意null和undefined的情况（没写data-category的元素默认不匹配）
图片加载完成后再初始化过滤，否则首屏可能闪动
如果画廊图片多、体积大，JS 执行时部分图片还没加载完，offsetHeight 等尺寸可能为 0，导致 Grid 布局塌陷或过滤后空白。别等 window.onload（太晚），用 document.readyState === 'complete' + 图片 load 事件组合更准。
简单做法：在所有 <img> 上加 loading="lazy"，然后用 Promise.all 等关键缩略图加载完再执行过滤初始化；更轻量的是监听 DOMContentLoaded 后延迟 16ms（一帧）再运行，多数情况够用。
-
<img>标签必须有src和alt，否则load事件不触发 - 如果用了
srcset，load仍可用，但不要依赖currentSrc做逻辑判断——它可能为空 - 首次加载默认显示“全部”，就别在 HTML 里预先加
is-hidden类，让 JS 统一控制
实际最麻烦的不是逻辑，是图片尺寸不一致导致的网格错位，还有用户点了“人像”后快速切回“全部”，中间那一帧空白没人注意到——但真上线后会被截图发群里问“为啥白屏”。
