html 图片分散,纯js和CSS3分散式宝丽来图片画廊

polaroid-gallery是一款效果非常酷的纯js和CSS3分散式宝丽来图片画廊插件。该宝丽来图片画廊在初始化时所有图片被分散在屏幕的不同地方，并旋转不同的角度。被选择的图片总是会被移动到屏幕的中间。

使用方法

在页面中引入polaroid-gallery.css和polaroid-gallery.js文件。

HTML结构

使用一个

元素作为图片画廊的容器。另外可以为图片画廊添加前后导航按钮。

< 前一张

下一张 >

初始化插件

在页面DOM元素加载完毕之后，可以通过new polaroidGallery()方法来构建一个新的图片画廊对象。

window.onload = function () {

new polaroidGallery();

}

图片画廊中的图片是通过json数据来进行异步加载的，确保在data文件夹中编写data.json文件，json文件里面存放图片的相对路径。文件的基本格式为：

[

{

"name": "img01.jpg",

"caption": "图片1"

},

{

"name": "img02.jpg",

"caption": "图片2"

}

]