An Album Library Written in Javascript, with ECMAScript 2015 and CSS3.
AGPL-3.0 License
一个使用JS编写的相册库,使用了ES2015+CSS3
这个类库的开始就是以ES6+CSS3为基础的,不对旧版本浏览器进行兼容,在新版本的Chrome和Firefox均可以直接使用。
如果需要对旧版浏览器进行兼容,可以自行使用Babel转换为ES5后使用。
注:Edge测试暂时不支持拼图布局模式的两张布局模式。
<link rel="stylesheet" href="./css/album.min.css" />
<script src="./js/album.js"></script>
<div id="album" style="width: 100%; height: 100%;"></div>
let obj = Album("album");
obj.setImage("", {
layout: obj.LAYOUT.PUZZLE,
resizeUpdate: 100
});
配置项 | 说明 | 可选项 | 含义 | 默认值 |
---|---|---|---|---|
layout | 布局类型 | Album.LAYOUT.PUZZLEAlbum.LAYOUT.WATERFALLAlbum.LAYOUT.BARREL | 拼图布局瀑布布局木桶布局 | Album.LAYOUT.WATERFALL |
fullScreen | 点击图片全屏 | Album.FULL_SCREEN.NONEAlbum.FULL_SCREEN.PAGEAlbum.FULL_SCREEN.WINDOW | 禁止全屏页面全屏全屏 | Album.FULL_SCREEN.NONE |
gutter | 图片间距 | {x: number, y: number} | x:横向间距y:纵向间距 | {x: 0, y: 0} |
waterfallColumn | 瀑布布局列数 | Number>0Album.WATERFALL_AUTO | 瀑布布局列数 | 4 |
waterfallAutoMinWidth | 瀑布布局自动响应列宽 | Number>0 | 最小列宽 | 200 |
barrelHeight | 木桶布局高度范围 | {min: number, max: number} | min:最小高度max:最大高度 | {min: 250, max: 300} |
resizeUpdate | 容器大小改变监听当容器大小改变时重新计算布局 | Number | <=0为不监视 | 不监视 |
imageLoadCallback | 所有图片加载完成回调函数 | Function | 当队列中的图片加载完成后自动调用的函数 | undefined |
obj.addImage([]);
追加图片,函数返回追加的图片对象,可对追加的图片设置其他属性。//添加1张图片
obj.addImage("./img/example.jpg").setAttribute("title", "example.jpg");
//添加多张图片
obj.addImage(["./img/example1.jpg", "./img/example2.jpg"]).forEach(function(image) {
image.setAttribute("title", image.src);
});
注:添加多张图片时,将会把所有图片加入缓冲队列进行加载,加载完成后才会被放入布局队列中进行布局。因此,图片的顺序以加载完成时的顺序为准。
如需控制图片顺序,可以使用addImage函数的第二个参数回调,传入一个函数,在图片成功加载时会回调该函数。
该函数可以接受1个Boolean参数,true表示图片加载成功,false表示图片加载失败。
拼图布局目前支持1~6张图片,超过6张将只显示前6张。