企业官网建设流程全解析

• 前端
• UI组件

Image Grid 是 Metro UI CSS 框架内置的响应式图片网格组件，它根据图片自身的宽高比例自动将其归类为横图（landscape）或竖图（portrait），并按固定栅格尺寸完成布局，无需手动干预。本文将基于 source/components/image-grid/README.md 文档，结合该组件的 源码实现、样式定义 与 官方示例页，完整讲解从纯 CSS 用法、JavaScript 初始化、data 属性声明式配置，到事件回调与 API 方法的全部细节，帮助你直接在自己的页面中落地一个可复用的图片墙或相册网格。

组件概览：从一堆图片到整齐的网格

Image Grid 的核心价值在于"零测量、自动分类"：你只需把<img>标签平铺进容器，组件会在图片加载完成后读取其原始尺寸，将宽度 ≥ 高度的图片标记为横图、高度 > 宽度的图片标记为竖图，然后分别套用两种固定的栅格尺寸。默认情况下，横图占 320×180，竖图占 160×180，二者高度一致，视觉上形成规整的错落网格。

该组件的依赖项为 None——它不依赖任何第三方库或插件，仅使用 Metro UI CSS 框架自身的核心运行时（Metro与Dom）。从源码结构看，组件通过Metro.Component("image-grid", {...})注册（见 image-grig.js），并由 source/components/index.js 统一引入，因此只要在页面中加载编译好的 lib/metro.css 与 lib/metro.js，组件即可开箱即用。

基本用法：纯 CSS 也能跑起来

Image Grid 的样式是独立的，即使不初始化任何 JavaScript，把图片放进.image-grid容器也能直接获得网格效果。最简用法如下（摘自文档 "Basic Usage"）：

<div class="image-grid"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> <img src="image4.jpg" alt="Image 4"> </div>

这里的.image-grid在 image-grid.less 中定义为display: flex; flex-flow: row wrap;，即弹性容器、行方向自动换行。每个图片项.image-grid__item采用overflow: hidden裁切溢出内容，其内部<img>以width: 100%; height: 100%铺满格子（见 image-grid.less），所以无论原始图片比例如何，都会被裁剪填充进对应尺寸的格子中。

需要说明的是：纯 CSS 模式下，横竖分类依赖你手动添加image-grid__item-landscape/image-grid__item-portrait类；而一旦用 JavaScript 初始化组件，分类与 DOM 结构生成就完全自动化了（详见下文"实现原理"）。

半尺寸网格：.half-size

当图片数量较多或屏幕较小时，可以给容器追加half-size修饰类，让所有格子缩小一半：

<div class="image-grid half-size"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> <img src="image4.jpg" alt="Image 4"> </div>

从 image-grid.less 可以看到，.half-size将横图缩小为 160×90、竖图缩小为 80×90，高度同步减半。它适合用作缩略图墙、相册预览等高频列表场景。

JavaScript 初始化：Metro.makePlugin

要让图片横竖自动分类、触发事件、支持 API 调用，需要通过 JavaScript 初始化组件。文档给出了两种初始化方式。

默认配置初始化

Metro.makePlugin(element, "image-grid");

自定义配置初始化

Metro.makePlugin(element, "image-grid", { useBackground: true, backgroundSize: "cover", backgroundPosition: "center center", onItemClick: function(e) { console.log("Item clicked:", e.item); } });

从框架核心看，Metro.makePlugin位于 source/core/metro.js：它先通过Metro.get$elements获取目标元素集合，再调用元素上注册的imageGrid方法完成初始化，最后返回Metro.getPlugin得到的组件实例，因此makePlugin的返回值可以直接调用组件方法。相应地，Metro.getPlugin(el, "image-grid")（见 source/core/metro.js）用于在初始化之后获取已存在的组件实例。

声明式用法：data 属性零脚本初始化

Metro UI CSS 支持通过data-role声明组件，页面加载时框架会自动完成初始化，无需手写 JavaScript。文档给出的示例同时演示了data-use-background与自定义类名参数：

<div><div class="image-grid"> <div class="image-grid__item image-grid__item-landscape" style="background: url(image1.jpg); background-repeat: no-repeat; background-size: cover; background-position: top left;" >Metro.makePlugin(element, "image-grid", { onItemClick: function(e) { console.log("Item clicked:", e.item); }, onDrawItem: function(e) { console.log("Item drawn:", e.item, e.image); }, onImageGridCreate: function() { console.log("Image grid created"); } });

API 方法

组件暴露了两个公开方法，文档说明如下：

• changeAttribute(attr, val)— 动态修改组件属性。支持的属性：data-use-background、data-background-size、data-background-position。
• destroy()— 移除组件及其事件处理器。

方法调用示例：

const imageGrid = Metro.getPlugin('#myImageGrid', 'image-grid'); imageGrid.changeAttribute('data-use-background', 'true');

结合源码看，changeAttribute的实现（见 image-grig.js）对三个受支持属性分别处理：data-use-background会用Metro.utils.bool把字符串值规范化为布尔值，然后更新options并重新执行_createItems()重建整个网格；data-background-size、data-background-position则直接赋值为字符串后重建。也就是说，changeAttribute是一个"改配置 + 即时重绘"的组合操作，适用于运行时切换背景图模式或调整裁切方式。

destroy()的实现为this.element.remove()（见 image-grig.js），直接移除组件元素；更规范的销毁路径还可以使用框架层的Metro.destroyPlugin(element, "image-grid")（见 source/core/metro.js），它会同步清理组件注册数据与data-role标记。

可用 CSS 类一览

基础类（Base Classes）

• .image-grid— 主容器类，display: flex; flex-flow: row wrap（见 image-grid.less）
• .image-grid__item— 每个图片的包裹容器，display: block; overflow: hidden
• .image-grid__item-landscape— 横图分类，尺寸 320px × 180px
• .image-grid__item-portrait— 竖图分类，尺寸 160px × 180px

修饰类（Modifiers）

• .half-size— 网格项缩小为一半尺寸（横图 160px × 90px，竖图 80px × 90px）

这三组尺寸均在 image-grid.less 中定义。需要注意：landscape 与 portrait 的高度恒定为 180px（半尺寸时为 90px），横图恰好是竖图宽度的两倍，因此两格竖图并排可对齐一格横图，这是网格视觉上规整的根本原因。

组件结构：初始化前后 DOM 对比

不启用背景图模式时，组件把每个<img>包进分类容器（文档 "Component Structure"）：

<div class="image-grid"> <div class="image-grid__item image-grid__item-landscape"> <img src="image1.jpg" alt="Image 1"> </div> <div class="image-grid__item image-grid__item-portrait"> <img src="image2.jpg" alt="Image 2"> </div> <!-- More items... --> </div>

启用useBackground: true后的结构见上文 "useBackground 模式" 一节。两种结构都由_createStructure（见 image-grig.js）驱动：先给容器追加image-grid类与clsImageGrid自定义类，再调用_createItems批量生成条目。

最佳实践

文档给出了五条官方建议，这里结合源码补充可落地的执行细节：

1. 使用高质量但已针对 Web 优化的图片，确保快速加载。由于组件按真实尺寸分类、按固定格子裁切，建议图片源尺寸至少覆盖格子尺寸，避免放大模糊。
2. 图片数量多或屏幕小时优先使用half-size，减少首屏加载与内存占用。
3. 需要精细控制图片呈现时启用useBackground，配合backgroundSize（如cover、contain）与backgroundPosition组合出理想的裁切区域；注意此时<img>会被隐藏，alt文本不再直接可见，建议结合data-title另行呈现图片信息以保证可访问性。
4. 为所有图片提供有意义的alt属性。除了无障碍意义，alt还会被写入格子的data-title元数据（useBackground 模式下），成为后续灯箱图注的数据来源。
5. 用onItemClick回调实现灯箱或详情视图。官方示例 examples/image-grid.html 展示了最直接的做法——在data-role中同时声明image-grid与lightbox，无需额外代码即可获得点击放大能力；需要自定义交互时，再改用onItemClick回调接管。

小结

Image Grid 是 Metro UI CSS 中"小而精"的典型组件：无依赖、纯 CSS 即可使用，JavaScript 模式则带来自动横竖分类、背景图渲染、事件回调与运行时属性变更四大能力。理解它的关键有三点：new Image()+onload的尺寸测量机制决定了分类准确性；flex-flow: row wrap与固定的 2:1 宽高比设计决定了网格的整齐感；而changeAttribute的"改配置即重绘"模式让它在运行时依然灵活。配合 Lightbox 等组件，你可以用极少量代码搭出完整的图片浏览体验。

• 前端
• UI组件