v3首页
核心
实例
资源
关于
v1.0

Wall 照片墙

使用说明

在极具风格化的项目中常用到照片墙，这些照片墙或用来做静态摄影图片展示，或用于做图文消息。本组件有如下特点：

  • 每张图片容器宽高比可控制
  • 使用grid布局，容器的行列数量可手动控制
  • 可自适应移动端
  • 可完美嵌入框架中的其他组件，比如card、graphic等
  • 容器内多种图层可自定义

默认效果

照片墙默认是一行四列，宽高相等的照片墙。

使用标题

在图片容器内追加caption的属性标签即表示图片标题，图片标题默认隐藏，鼠标经过滑出；可对外容器设置sticky属性固定标题。

如果固定了标题，但是标题内容长度不一，可考虑给caption属性标签使用省略。

  • 欧洲最长屋桥盛不下千年传奇
  • 俄罗斯一农户捡到“小猫”，长大后却发现不是猫
  • 可乐果，尼日尔的快乐果
  • “水城”威尼斯遇水灾恐损失惨重，圣马可广场被淹
  • 尼泊尔旅游年启动仪式在拉萨举行
  • 萨迪亚特：中东文化灯塔熠熠生辉
  • 海外华侨华人积极参与，中国春节越来越有世界范儿
  • 以色列主要旅游景点营造春节气氛
  • 欧洲最长屋桥盛不下千年传奇
  • 俄罗斯一农户捡到“小猫”，长大后却发现不是猫
  • 可乐果，尼日尔的快乐果
  • “水城”威尼斯遇水灾恐损失惨重，圣马可广场被淹
  • 尼泊尔旅游年启动仪式在拉萨举行
  • 萨迪亚特：中东文化灯塔熠熠生辉
  • 海外华侨华人积极参与，中国春节越来越有世界范儿
  • 以色列主要旅游景点营造春节气氛

使用分类和图标

在图片容器内追加type的属性标签即表示分类（居左）；追加legend的属性标签即表示图标（居右）。

  • 欧洲最长屋桥盛不下千年传奇 国际

使用彩色标签

在图片容器内追加tags的属性标签即彩色标签，标签内可使用ax-badge彩色徽章。关于徽章详细用法请点击这里。

  • 欧洲最长屋桥盛不下千年传奇 国际 欧洲 前年传奇 乡村美景

使用工具

如果图片是可编辑的，那么可能需要进行增删改操作，在图片容器内追加tools的属性标即可。

  • 欧洲最长屋桥盛不下千年传奇
  • 欧洲最长屋桥盛不下千年传奇

固定浮层

在图片容器内追加more的属性标签即表示遮罩浮层，默认为隐藏状态，使用more="show"可显示，内容可自定义；追加count的属性标签即表示数量统计，位于容器左下角，内容可自定义。

  • 6图
  • +15
  • 已上传15张图
    继续上传

图文混排

在图片容器内追加text的属性标签即表示遮罩文本，内容可自定义，内容形式不限。

  • BEIJING

    北京，中国首都

  • CHONGQING

    重庆，中国山城

比例

图片容器默认是宽高1:1的正方形，可通过对外容器追加ratio属性改变图片容器形状，详细说明如下：

  • ratio="1:1"，正方形，默认
  • ratio="16:9"，高清屏幕比例
  • ratio="16:10"，黄金分割比例
  • ratio="4:3"，传统屏幕比例
  • ratio="3:2"，新办公屏幕比例

  • 1:1

  • 16:9

  • 16:10

  • 4:3

  • 3:2

列数

组件默认是一行四列，通过使用ax-wall-*类设置列数，可选值范围为1~24。

间隙

图片容器之间的默认间距是0px，通过对外容器追加ax-gap-*类修改间隙；如果设置了间隙，不管是什么尺寸的间隙，在手机端都会自动设为2px。详细说明如下：

  • ax-gap-0 0px的间隙（默认）
  • ax-gap-1 1px的间隙
  • ax-gap-2 2px的间隙
  • ax-gap-xxs 4px的间隙
  • ax-gap-xs 8px的间隙
  • ax-gap-sm 10px的间隙
  • ax-gap-md 14px的间隙
  • ax-gap-lg 18px的间隙
  • ax-gap-xl 22px的间隙
  • ax-gap-xxl 28px的间隙

自动截断

照片墙在手机端自动会以一行三列显示，如果使用了边距在手机端则自动设为2px；如果图片较多，有多行情况的话在手机端显示不友好，可对外容器使用split属性，结果照片墙只会显示前三条，从第四条开始自动隐藏。

如果成功截取了，图片容器中有more属性标签，那么将自动显示出来。

+12 +12 +12 +12 +12 +12

显示一行

如果确认图片在pc和手机端只会显示一行，那么可将type属性标签和count属性标签从图片容器拿出来。

+12 +12 +12 +12 +12 +12 +12 +12 国际 6图

lazyload

可配合axLazyload插件使用，其原理是先使用loading图片载入，等img标签进入视窗后将data-src中的真实图片地址替换src值。关于插件详细用法请点击这里。

                                    <a href="###" class="ax-avatar"><img src="/v2.0/dist/images/blank.svg" data-src="https://src.axui.cn/v2.0/public/images/head01.jpg" axLazyLoad/></a>
                                    <p></p><p></p><p></p>
                                    <a href="###" class="ax-avatar ax-lg"><img src="/v2.0/dist/images/blank.svg" data-src="https://src.axui.cn/v2.0/public/images/head02.jpg" axLazyLoad/></a>
                                    <p></p><p></p><p></p>
                                    <a href="###" class="ax-avatar ax-xxl"><img src="/v2.0/dist/images/blank.svg" data-src="https://src.axui.cn/v2.0/public/images/head03.jpg" axLazyLoad/></a>

lightbox

可配合axLightbox插件使用，关于插件详细用法请点击这里。

                            <ul class="ax-wall">
                                <li><img src="https://src.axui.cn/v2.0/public/images/image-1.jpg" axLightbox="insName:'demo'"/></li>
                                <li><img src="https://src.axui.cn/v2.0/public/images/image-2.jpg" axLightbox="insName:'demo'"/></li>
                                <li><img src="https://src.axui.cn/v2.0/public/images/image-3.jpg" axLightbox="insName:'demo'"/></li>
                                <li><img src="https://src.axui.cn/v2.0/public/images/image-4.jpg" axLightbox="insName:'demo'"/></li>
                            </ul>