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

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

gallery.PNG

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

js库

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

首先添加样式：

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

  

    <img src="images/1.jpg" alt="image01">
http://www.colazionedamichy.it/
    <img src="images/2.jpg" alt="image02">
http://www.percivalclo.com/
    <img src="images/3.jpg" alt="image03">
http://www.wanda.net/fr
    <img src="images/4.jpg" alt="image04">
http://lifeingreenville.com/
    <img src="images/5.jpg" alt="image05">
http://circlemeetups.com/
    <img src="images/6.jpg" alt="image06">
http://www.castirondesign.com/
  

引用gallery.js文件：

调用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 (
      

        

          
        
        

          <
          >
        
      
    );
  },

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

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

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

module.exports = App;