agustine/waterfall

#Waterfall

web图片瀑布流显示组件

##使用方法：

/**
 * 初始化
 * @param {String} elemId   容器id
 * @param {Object} settings 配置
 */
var waterfall = new Waterfall(elemId, settings);

##配置参数（settings）：

// 图片dom之间的间距
margin: 0, 
// 宽度、高度像素补偿
// dom的宽度、高度可能大于中间图片的宽度、高度
// 比如需要添加边框、相框、或者图片下面文字
// 一下2个值为没一个water的补偿值
offsetH: 0, // 宽度补偿
offsetV: 0, // 高度补偿
// 瀑布流底部留白部分像素高度，高度最高的一列下面留白的部分
// 如果页面是以scroll到底部来触发加载更多的方法，
// 如果没有留白的部分，那可能加载完成后也看不到新加载的图，
// 它们很可能在可视区域的下方，使用户不知道新的图片已经加载
// 用户必须再次向下滚动才能看到，所以需要一个留白部分
whiteBottom: 50,

// 瀑布列数，等分计算出列宽
// 如果大于0，瀑布流就会按固定列数加载
// 也会导致minWidth失效
cols: 0,
// 最小water的宽度
// 按((瀑布流容器的宽度 - margin)/(minWidth + margin))计算可以分多少列,然后等分计算出列宽
// 如果cols大于0，则使用固定列数布局，此设定值无效
minWidth: 100,

// ajax配置
ajaxDataType: 'json', // ajax接口数据类型

// ajax接口url模版
// 如果使用了这个配置，并且所配置的字符串中存在{{pno}}，则ajaxUrl与ajaxData失效
// 会使用当前页码替换'{{pno}}'作为接口的url
// 例如 '/data?pno={{pno}}&param1=XX&param2=XXX'，则使用'/data?pno=1&param1=XX&param2=XXX'作为第一页的请求url
ajaxUrlTemplate: '',

ajaxUrl: '', // ajax接口url
ajaxData: {}, // ajax接口参数（除当前页参数）
pageIndexName: 'pno', // ajax接口页码参数名称

// 起始页码，有些ajax接口页码从1开始
startPageIndex: 0,

// 水滴water容器的tagName
// 得到图片数据后，会生产一个该tagName的元素
// 使用template方法生成dom，插入到该元素
// 最后把该元素插入到瀑布流容器中
// 请尽量不要为其设定会造成其css宽度高度与元素实际占用的宽度高度不服的css属性
// 如果 margin padding border等，否则请自行计算好补偿值
waterBox: 'li',
/**
 * 从ajax接口返回数据解析出图片数据数组的方法
 * @param  {Object} res ajax接口的response
 * @return {Array}     图片数据数组
 */
parse: function(res){
    return (res instanceof Array) ? res : [];
},
/**
 * 从单个图片数据中获取图片url的方法
 * @param  {Object} item 单个图片数据
 * @return {String}      图片的url
 */
url: function(item){
    return item ? item.url : '';
},
/**
 * 水滴dom模版方法
 * @param  {object} item 单个图片数据
 * @return {String}      水滴dom字符串
 */
template: function(item){
    return '';
},
/**
 * 每一页及其所有图片加载完成（失败）后的回调
 * @param  {Object} res ajax接口的response   
 */
pageLoaded: function(res){
},
/**
 * 没一个水滴项图片想在完成后的回调
 * @param  {Object} item 单个图片数据   
 */
itemRendered: function(item){
},
/**
 * 按回调数据判断是否是最后一页
 * @param  {Object} res ajax接口的response
 * @return {Boolean}    是否是最后一页
 */
last: function(res){
    return false;
},
/**
 * 加载下一页时，发现没有下一页时的回调
 */
noMore: function(){

}

##方法：

/**
 * 加载新一页的方法
 */
waterfall.loadMore();

/**
 * 重置方法，可用作动态调整列数
 * @param  {?Number} cols 列数
 */
waterfall.reset(cols);

agustine / waterfall

About

Languages