Gallery

一个使用JS编写的图片库

查看Demo

使用方法

1. 在HTML中引入gallery.min.js和gallery.min.css(压缩文件已使用babel编译成es5语法)

<link rel="stylesheet" href="./gallery.min.css">
<script src="./gallery.min.js">

或者

npm install j-gallery --save-dev

ES5

var Gallery = require('j-gallery').Gallery

ES6

import { Gallery, css } = 'j-gallery'

2. 定义一个根图片容器，并指定类名、宽度(宽度支持百分比)

<div class="gallery"></div>

.gallery {
    width: 80%
}

3. 新建一个Gallery的实例，并传入容器的类名

const gallery = Gallery('.gallery')

4. 初始化类库，并传入初始化配置

gallery.setImage([
    "http://placehold.it/1300x1600/E97452/fff",
    "http://placehold.it/1300x1300/4C6EB4/fff",
    "http://placehold.it/1300x1250/449F93/fff",
    "http://placehold.it/800x400/936FBC/fff",
    "http://placehold.it/1000x500/D25064/fff"
],{
    layout: 2,
    fullScreen: true
})

• 第一个参数为一个图片地址字符串或者图片地址字符串数组，可以传入一个或多个图片
• 第二个参数为对象，用于初始化配置

|配置项|说明|可选项|含义|默认值| |:---:|:---:|:---:|:---:|:---:| |layout|布局类型|123|拼图布局瀑布布局木桶布局|2| |fullScreen|图片点击预览|truefalse|打开关闭|false| |gutter|图片间距|{x: number, y: number}|x：横向间距y：纵向间距|{x: 10, y: 10}| |waterfallColumn|瀑布布局列数|正整数|瀑布布局列数|4| |barrelHeight|木桶布局最小高度|正整数|最小高度|200|

API

/**
 * 添加图片
 * @param {(string|string[])} image 一张图片的 URL 或多张图片 URL 组成的数组
 * @param {Boolean} bool 是否把图片直接添加到容器(必选)
 */
gallery.addImage([...image], true)

/**
 * 移除相册中的图片
 * @param  {(HTMLElement|HTMLElement[])} image 需要移除的图片
 * @return {boolean} 是否全部移除成功
 */
gallery.removeImage(image||[...image])


/**
 * 设置相册的布局
 * @param {number} layout 布局值，IfeAlbum.LAYOUT 中的值
 */
gallery.setLayout()

/**
 * 获取相册的布局
 * @return {number} 布局枚举类型的值
 */
gallery.getLayout()

/**
 * 获取相册所有图像对应的 DOM 元素
 * @return {HTMLElement[]} 相册所有图像对应的 DOM 元素组成的数组
 */
gallery.getImageDomElements()

/**
 * 设置拼图布局容器高度
 * @param {number} [height=500] 
 * @returns {Boolean}
 */
gallery.setPuzzleHeight()

/**
 * 设置图片之间的间距
 * @param {number}  [x=10]  图片之间的横向间距
 * @param {number}  [y=10]  图片之间的纵向间距，如果是 undefined 则等同于 x
 * @return {Boolean} 
 */
gallery.setGutter()

/**
 * 设置瀑布流列数
 * @param {Number} [column=4] 瀑布流列数
 * @return {Boolean} 
 */
gallery.setWaterfallColumn()

/**
 * 允许点击图片时全屏浏览图片
 */
gallery.enableFullscreen()

/**
 * 禁止点击图片时全屏浏览图片
 */
gallery.disableFullscreen()

/**
 * 获取点击图片时全屏浏览图片是否被允许
 * @return {boolean} 是否允许全屏浏览
 */
gallery.isFullscreenEnabled()

/**
 * 设置木桶模式每行高度的上下限，单位像素
 * @param {number} [min=200] 最小高度
 */
gallery.setBarrelHeight()

/**
 * 获取木桶模式每行高度的下限
 * @return {number} 最少图片数（含）
 */
gallery.getBarrelHeightMin()