jquery照片墙插件 |图片效果|下载

简要教程

photopile.js是一款jquery照片墙插件。该jquery照片墙插件的特点是兼容主流浏览器，照片可以使用鼠标进行拖拽，支持图片进行轮播，支持移动触摸事件。

使用方法

在页面中引入jquery和jquery-ui.min.js和jquery.ui.touch-punch.min.js文件，以及插件文件photopile.css和photopile.js。

HTML结构

使用该jquery照片墙插件的基本HTML结构如下：


                 初始化插件
                在页面DOM元素加载完毕之后，通过下面的方法来初始化该jquery照片墙插件。
                PhotoPile({
  OPTION: VALUE,
  ...
}).scatter()
                
                 配置参数
                该jquery照片墙插件的可用配置参数有：
                缩略图参数：
                
                    numLayers：图片堆叠的层数。默认为5层。
                    thumbOverlap：图片重叠部分的尺寸，单位像素，默认50像素。
                    thumbRotation：最大旋转角度，默认为45deg。
                    thumbBorderWidth：图片的边框宽度，默认为2像素。
                    thumbBorderColor：图片的边框颜色，默认为白色。
                    thumbBorderHover：hover图片时边框的颜色，默认为'#EAEAEA'。
                    draggable：图片是可以进行拖拽，默认为true。
                
                图片容器参数：
                
                    fadeDuration：图片淡入淡出的速度，默认为200毫秒。
                    pickupDuration：图片升起和下降的速度，默认为500毫秒。
                    photoZIndex：z-index属性，默认为100。
                    photoBorder：大图的边框宽度，默认为10像素。
                    photoBorderColor：大图的边框颜色，默认为白色。
                    showInfo：是否显示描述信息，默认为true。
                
                自动播放：
                
                    autoplayGallery：图片是否自动轮播。默认为false。
                    autoplaySpeed：图片自动轮播的速度。默认为5000毫秒。
                
                图片预加载：
                
                    loading：预加载loader的图片路径。默认为'images/loading.gif'。
                
                  该jquery照片墙插件的github地址为：https://github.com/bigbhowell/photopile-js