照片墙应按场景选布局：Grid适合响应式网格（需设object-fit和minmax），Flex适合单行滚动，column-count适合兼容性要求高的瀑布流；随机排列须用Fisher-Yates算法并强制重绘。
照片墙不是靠堆代码实现的，而是靠布局策略选对 —— Flex 适合线性排列，Grid 适合自适应网格，column-count 适合瀑布流，三者混用反而容易出错。
用 display: grid 实现响应式照片网格
多数人卡在“图片大小不一导致网格塌陷”，根本原因是没设 object-fit 或没限制容器尺寸。Grid 自身不处理图片缩放，只管位置。
-
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))是关键：最小 250px，大屏自动均分，小屏回退为单列 - 必须给
.photo-item img加width: 100%; height: 200px; object-fit: cover;，否则高度塌陷、间隙错乱 - 别用
height: auto配 Grid —— 它会让行高不可控，尤其图片比例不一致时 - 移动端需加
@media (max-width: 480px)强制grid-template-columns: 1fr，否则小屏出现横向滚动
用 display: flex 做单行可滚动照片栏
想让所有图排成一行、左右滑动查看？Flex 是最直接方案，但默认会换行，且不处理溢出隐藏。
- 父容器必须设
display: flex; overflow-x: auto; scroll-behavior: smooth; - 子项（
img）要加flex: 0 0 auto;，否则 Flex 会强行拉伸或压缩图片 - 去掉
flex-wrap（默认是nowrap），否则在窄屏上图片会挤成一列 - 记得加
-webkit-overflow-scrolling: touch;，不然 iOS 滑动卡顿 - 如果图片点击后要放大，别在
img上直接加transform: scale()，先用position: relative防止层级错乱
用 column-count 做瀑布流照片墙
这不是现代首选，但兼容性极好（IE10+），适合内容为主、交互少的相册页。
立即学习“前端免费学习笔记（深入）”；
-
column-count: 3;+column-gap: 1rem;就能分三栏，但图片必须包裹在块级元素里（如div.photo-item），img单独用会断行异常 - 每张图外层
div要设break-inside: avoid;，否则一张图被切成两段显示 - 不能依赖
height控制行高，因为 column 布局下高度由内容撑开，JS 动态加载图片后需手动触发document.body.style.columnCount = document.body.style.columnCount;重绘 - 不支持
justify-content居中，水平对齐只能靠text-align: center配合display: inline-block
随机排列照片的 JS 实现要点
DOM 重排不是调个 sort(() => Math.random() - 0.5) 就完事 —— 这种写法有偏置，且不保证视觉随机。
- 用 Fisher-Yates 洗牌算法，确保真随机：
function shuffle(array) { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]]; } return array; } - 获取节点必须用
Array.from(document.querySelectorAll('.photo-item'))，不能用getElementsByClassName返回的 live collection，否则插入时顺序错乱 - 重排后建议加
photowall.style.opacity = 0.99;再秒设回 1，强制浏览器重绘，避免部分图片闪一下才到位 - 如果照片带懒加载（
loading="lazy"），随机后需手动触发img.load()或重新设置src，否则首屏外图片不显示
真正难的不是写出来，而是判断该用哪种布局 —— Grid 适配多图等高场景，Flex 适合线性导航，column-count 仅在需要兼容老浏览器或做文字混排时才值得考虑。别为了“炫技”硬套 3D 变换或 CSS 动画，加载慢、卡顿、SEO 不友好，都是真实代价。
