纯js实现支持触摸的3D照片墙

继上一篇如何用H5实现一个触屏版的轮播器？之后，又写了一个具有3D效果的照片墙，支持触摸操作，在手机上也可以使用。效果如下：

gallery.PNG

该组件以两种形式提供，一种以js库形式提供，需要使用者自行拷贝html和css代码；另一种被封装成react组件，使用者只需提供几个属性即可。下面具体介绍两种形式的使用方法。

js库

具体可参考github上的示例 3d-touch-gallery

首先添加样式：

<link rel="stylesheet" type="text/css" href="lib/gallery.css" />

按照如下格式定义html，item-wrapper和item类是必须的：

<div id="dg-container" class="dg-container">
  <div class="item-wrapper">
    <a class="item" href="#">&lt;img src="images/1.jpg" alt="image01"&gt;<div>http://www.colazionedamichy.it/</div></a>
    <a class="item" href="#">&lt;img src="images/2.jpg" alt="image02"&gt;<div>http://www.percivalclo.com/</div></a>
    <a class="item" href="#">&lt;img src="images/3.jpg" alt="image03"&gt;<div>http://www.wanda.net/fr</div></a>
    <a class="item" href="#">&lt;img src="images/4.jpg" alt="image04"&gt;<div>http://lifeingreenville.com/</div></a>
    <a class="item" href="#">&lt;img src="images/5.jpg" alt="image05"&gt;<div>http://circlemeetups.com/</div></a>
    <a class="item" href="#">&lt;img src="images/6.jpg" alt="image06"&gt;<div>http://www.castirondesign.com/</div></a>
  </div>
</div>

引用gallery.js文件：

<script type="text/javascript" src="lib/gallery.js"></script>

调用createGallery方法，该方法会返回一个对象，该对象提供3个方法：

• bindTouchEvent()：支持触摸
• prev()：翻到前一页
• next()：翻到下一页

var gallery = createGallery(document.getElementsByClassName('dg-container')[0]);
gallery.bindTouchEvent(); //调用此函数可支持触摸滑动

var btnPrev = document.getElementsByClassName('dg-prev')[0];
var btnNext = document.getElementsByClassName('dg-next')[0];

btnPrev.addEventListener('click', function () {
  gallery.prev();
});

btnNext.addEventListener('click', function () {
  gallery.next();
});

react组件

具体可参考github上的示例Touch3DGallery，该示例工程使用脚手架generator-react-web-app生成。

可向该组件传递三个prop：

• items：图片数组，数组元素是一个包含image和text属性的对象
• touch：bool类型，设为true可使组件支持触摸滑动，在手机上使用时需设为true
• onMounted：func类型，该回调会回传一个gallery对象给父组件，父组件可通过该对象控制组件的翻页

具体使用方法如下：

import React from 'react';
import Touch3DGallery from '../components/Touch3DGallery/Touch3DGallery';

var items = [
  {
    image: require('../../images/1.jpg'),
    text: 'http://www.percivalclo.com'
  },
  {
    image: require('../../images/2.jpg'),
    text: 'http://www.wanda.net/fr'
  },
  {
    image: require('../../images/3.jpg'),
    text: 'http://lifeingreenville.com'
  },
  {
    image: require('../../images/4.jpg'),
    text: 'http://circlemeetups.com'
  },
  {
    image: require('../../images/5.jpg'),
    text: 'http://www.castirondesign.com'
  },
  {
    image: require('../../images/6.jpg'),
    text: 'http://www.mathiassterner.com/home'
  }
];

var App = React.createClass({
  _gallery: null,

  render() {
    return (
      <div className="app">
        <div className="gallery-container">
          <Touch3DGallery items={items} onMounted={this.onGalleryMounted} touch={false}/>
        </div>
        <nav>
          <button onClick={this.onPrev}><</button>
          <button onClick={this.onNext}>></button>
        </nav>
      </div>
    );
  },

  onGalleryMounted(gallery) {
    this._gallery = gallery;
  },

  onPrev() {
    if (this._gallery) {
      this._gallery.prev();
    }
  },

  onNext() {
    if (this._gallery) {
      this._gallery.next();
    }
  }
});

module.exports = App;