Skip to content

jinliming2/Album

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

47 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Album

Developing GitHub license GitHub stars GitHub forks GitHub issues

IE safari

Chrome Firefox Edge

一个使用JS编写的相册库,使用了ES2015+CSS3

Demo

写在前面

这个类库的开始就是以ES6+CSS3为基础的,不对旧版本浏览器进行兼容,在新版本的Chrome和Firefox均可以直接使用。

如果需要对旧版浏览器进行兼容,可以自行使用Babel转换为ES5后使用。

注:Edge测试暂时不支持拼图布局模式的两张布局模式。

Usage 使用方法

  1. 包含album.min.css(或是未压缩版:album.css)和album.min.js(或是未压缩版:album.js)。
<link rel="stylesheet" href="./css/album.min.css" />
<script src="./js/album.js"></script>
  1. 定义一个div容器,并指定id、宽度和高度(拼图布局必须指定高度,其他布局不需要)。
<div id="album" style="width: 100%; height: 100%;"></div>
  1. 使用div容器的id构造Album对象。
let obj = Album("album");
  1. 调用初始化函数初始化类库,并传入初始化参数。
obj.setImage("", {
    layout: obj.LAYOUT.PUZZLE,
    resizeUpdate: 100
});
  • 第一个参数为一个字符串或是字符串数组,传入一个或多个图片的地址。
  • 第二个参数为一个对象,用于配置类库。
配置项 说明 可选项 含义 默认值
layout 布局类型 Album.LAYOUT.PUZZLE
Album.LAYOUT.WATERFALL
Album.LAYOUT.BARREL
拼图布局
瀑布布局
木桶布局
Album.LAYOUT.WATERFALL
fullScreen 点击图片全屏 Album.FULL_SCREEN.NONE
Album.FULL_SCREEN.PAGE
Album.FULL_SCREEN.WINDOW
禁止全屏
页面全屏
全屏
Album.FULL_SCREEN.NONE
gutter 图片间距 {x: number, y: number} x:横向间距
y:纵向间距
{x: 0, y: 0}
waterfallColumn 瀑布布局列数 Number
>0
Album.WATERFALL_AUTO
瀑布布局列数 4
waterfallAutoMinWidth 瀑布布局自动响应列宽 Number
>0
最小列宽 200
barrelHeight 木桶布局高度范围 {min: number, max: number} min:最小高度
max:最大高度
{min: 250, max: 300}
resizeUpdate 容器大小改变监听
当容器大小改变时重新计算布局
Number <=0为不监视 不监视
imageLoadCallback 所有图片加载完成回调函数 Function 当队列中的图片加载完成后自动调用的函数 undefined
  1. 调用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表示图片加载失败。

PUZZLE 拼图布局

拼图布局目前支持1~6张图片,超过6张将只显示前6张。

一张图片 两张图片 三张图片 四张图片 五张图片 六张图片

WATERFALL 瀑布布局

瀑布布局

BARREL 木桶布局

木桶布局