用layui做一个9宫格的图片浏览页面并适配移动端

好的，下面是使用 layui 制作一个9宫格的图片浏览页面的基本步骤：

1. 引入 layui 的样式和脚本文件

在 HTML 文件中引入 layui 的 CSS 样式文件和 JavaScript 脚本文件。

<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.7/css/layui.min.css">
<script src="https://cdn.staticfile.org/layui/2.5.7/layui.min.js"></script>

2. 创建 HTML 结构

在页面中创建一个 div 容器，用于显示图片列表。然后在容器中使用 layui 的 grid 组件创建一个九宫格布局，每个格子中放置一张图片。

<div class="layui-container">
  <div class="layui-row">
    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4"><img src="img/1.jpg"></div>
    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4"><img src="img/2.jpg"></div>
    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4"><img src="img/3.jpg"></div>
    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4"><img src="img/4.jpg"></div>
    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4"><img src="img/5.jpg"></div>
    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4"><img src="img/6.jpg"></div>
    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4"><img src="img/7.jpg"></div>
    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4"><img src="img/8.jpg"></div>
    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4"><img src="img/9.jpg"></div>
  </div>
</div>

3. 添加响应式布局

为了适应移动端设备，我们需要在容器的 class 属性中加入 `layui-col-space15` 和 `layui-col-xs12` 两个类，分别控制九宫格之间的间距和在移动端显示为一列。

<div class="layui-container">
  <div class="layui-row layui-col-space15 layui-col-xs12">
    ...
  </div>
</div>

4. 添加图片预览功能

使用 layui 的 layer 组件可以为图片添加预览功能。在每个图片的 div 容器上添加一个 `layer-src` 属性，指定图片的预览地址。然后在页面底部添加一个 JavaScript 代码块，使用 layui 的 layer 组件初始化图片预览功能。

<div class="layui-container">
  <div class="layui-row layui-col-space15 layui-col-xs12">
    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4"><img src="img/1.jpg" layer-src="img/1.jpg"></div>
    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4"><img src="img/2.jpg" layer-src="img/2.jpg"></div>
    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4"><img src="img/3.jpg" layer-src="img/3.jpg"></div>
    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4"><img src="img/4.jpg" layer-src="img/4.jpg"></div>
    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4"><img src="img/5.jpg" layer-src="img/5.jpg"></div>
    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4"><img src="img/6.jpg" layer-src="img/6.jpg"></div>
    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4"><img src="img/7.jpg" layer-src="img/7.jpg"></div>
    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4"><img src="img/8.jpg" layer-src="img/8.jpg"></div>
    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4"><img src="img/9.jpg" layer-src="img/9.jpg"></div>
  </div>
</div>

<script>
  layui.use('layer', function(){
    var layer = layui.layer;
    layer.photos({
      photos: '.layui-col-xs4'
    });
  });
</script>

以上就是使用 layui 制作一个9宫格的图片浏览页面的基本步骤。