移动端H5相册的实现

前言

  相册是移动端页面中常见的展示模块,根据相册中的图片是否能够循环展示,可将相册分为循环相册和非循环相册。本文介绍了移动端H5相册的实现原理。

非循环相册的原理

  非循环相册是最基础的一种相册,其实现原理较简单。非循环相册的展现形式如图1中的动态图所示。

非循环相册

图 1 非循环相册

  实现非循环相册的第一步是相册图片的水平布局,将相册所有图片在水平方向上依次无缝排列。以图1中所展示的非循环相册为例,其对应的HTML和CSS代码片段分别示例如下:

1
2
3
4
5
6
7
8
9
10
<section class="album-wrap">
<ul class="album">
<li><img src=""></li>
<li><img src=""></li>
<li><img src=""></li>
<li><img src=""></li>
<li><img src=""></li>
...
</ul>
</section>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.album-wrap {
overflow: hidden;
}
.album {
white-space: nowrap;
font-size: 0;
}
.album li {
display: inline-block;
width: 100%;
height: 0;
padding-bottom: 62.8%;
}
.album li img {
width: 100%;
}

  第二步就是给相册元素(如上述示例中类名为”album”的元素)绑定touchstarttouchmovetouchend三类事件。当用户手指接触屏幕时,触发touchstart事件,用户手指在屏幕上滑动时,触发touchmove事件,可以根据手指的在屏幕上的滑动方向和距离来设置相册的滑动方向和距离,使用tranform属性可以实现流畅的滑动。当手指离开屏幕时,触发touchend事件,此时可以判断相册是否翻页。当滑动到相册第一张图片或者最后一张图片仍然朝着相同的方向继续滑动时,相册停止翻页。

循环相册的原理

  循环相册的原理比非循环相册的原理稍微复杂一些。循环相册与非循环相册的最大区别在于对相册滑动到首、尾图片时的处理方式。图2中的动图展示了一种常见的循环相册。

循环相册

图 2 循环相册

  为了达到相册图片循环滑动的目的,首先需要在非循环相册布局的基础上,在图片列表首尾各额外添加一张图片,首尾添加的图片分别是原始相册(即原始图片列表)的最后一张图片和第一张图片的副本(不是原图)。这样,当相册滑动到原始相册第一张图片并且继续朝着同一个方向滑动时,相册会显示额外复制的原始相册最后一张图片的副本,视觉上相册是”循环”展示的,此时如果需要翻页,则在页面翻页动画(如果有)结束之后,设置相册瞬间滑动到原始相册的最后一张图片(可以通过关闭过渡动画之后给相册设置一个合适的平移距离来实现,视觉上感受不到这个翻页过程)。对于相册滑动到原始相册最后一张图片时的处理方式与上述方法类似,此时,相册需要瞬间滑动到原始相册第一张图片。通过这样一个技巧就实现了相册图片的循环展示。相册翻页动画结束后执行相应代码可以通过给相册DOM绑定transitionend事件来实现。

相册组件

  根据循环相册和非循环相册的实现原理,笔者实现一个相册功能组件slider,可以根据开发需要配置相册是否循环滑动,以及是否支持定时轮播功能。笔者将slider组件合并到了自己的js武器库jslever(JS原生代码编写)中,现已将完整代码上传至github仓库。读者可以参考jslever的README文件中的示例来使用slider组件。