album

木桶排列的相册

兼容性

兼容性 IE9+

npm

npm install q-album --save

用法

let myAlbum = new Album(Element[,options]);

操作数据API （基于 Array 的原生方法，参数全部相同，用法全部相同）

api.concat();
api.push();
api.pop();
api.revers();
api.shift();
api.unshift();
api.sort();
api.splice();

强制刷新一次视图

api.refresh();

替换原数据

会自动刷新视图

api.data = newData;

options

|名|类型|是否可断点设置|默认值|作用| |-|-|-|-|-| |data|Array|false|Array|存放数据| |responsive|boolean/object|false|false|响应式断点设置| |height|number|true|100|图片的高度| |space|number|true|5|上下左右间距| |maxLines|number|true|auto|限制行数| |resizeRefreshDelay|ms|false|100|防止大量刷新，屏幕尺寸改变刷新的延迟 |onInit|function|false|null|初始化后的回调函数| |onRefreshBefore|function|false|null|更新视图前的回调函数| |onRefreshAfter|function|false|null|更新视图后的回调函数| |create|function|false|见下|元素的构造函数|

data 数组结构

// 数据格式 ， src width height 必须要有，剩余按照需要自行添加
const FORMATDATA = [
  {src:'url',width:'number',height:'number'},
  {src:'url',width:'number',height:'number'},
  {src:'url',width:'number',height:'number'},
];

create 默认函数

注意：这三个 自定义标签是必须要有 父子级关系 也不要改变！ 你可以根据需要增加新的标签元素 自定义标签会根据是否有 href 属性 转换成 div 或者 a

create: function(dataItem,album){
 return `<album-item>
           <album-content>
             <album-pic></album-pic>
           </album-content>
         </album-item>`;
},