waterfall-js

概述

js 计算图片瀑布布局，支持小程序布局计算。示例代码在demo文件夹内。

示例图

配置项

• width 瀑布布局的总宽度
• defaultHeight 无图时的默认高度
• padding : {left:0,right:0,top:0,bottom:0} 瀑布布局的四个内边距的值
• columnCount 图片显示的列数
• itemGapH 左右图片之间的空隙
• itemGapV 上下图片之间的空隙
• extHeight 额外的高度，比如增加文字等
• async 如果是异步，就按照谁的图片先加载先输出，如果不是异步，就需要按图片给定的顺序输出。
• imgName: 'src' 自定义图片字段的名称

方法

• load(list) 开始加载图片
• on('load', callback) 监听每个图片加载成功的回调函数
• on('end', callback) 监听所有图片加载成功的回调函数

使用用法

1、浏览器中的用法

var columnCount = 3;
var windowWidth = window.innerWidth
// 初始化
var fall = new Waterfalljs({
    width: windowWidth,
    // 无图时，默认的高度
    defaultHeight: 120,
    // 图片展示顺序是否按照给定的数据顺序，true表示无序，false表示有序
    async: true,
    // 页面展示瀑布图的列数
    columnCount: columnCount,
    // 除图片外其他额外高度
    extHeight: 25,
    // 外围盒子的padding值
    padding: {
        left: 10,
        right: 10,
        top: 10
    },
    // 每一项之间左右的间隔值
    itemGapH: 10,
    // 每一项之间上下的间隔值
    itemGapV: 10
})
// 图片加载回调函数
fall.on('load', function(item, index) {
    // 如果想计算一项图片，就在页面上显示，可以使用load回调
})
// 图片全部加载成功后回调函数
fall.on('end', function(list) {
    // 如果想等所有图片都计算完成，可以使用end回调返回的list数据
})
var imgList = [
    {text: '生活本不苦，苦的是欲望过多，身心本无累，累的是背负太多，再苦，都要用今天的微笑，把它吟咏成一段从容的记忆，再累，都要用当下的遗忘穿越万道红尘，让心波澜不惊，认识一个人靠缘分，了解一个人靠耐心，征服一个人靠智慧，处好一个人靠包容'},
    {rc: './img/1.webp'},
    {src: './img/2.webp'},
    {src: './img/3.webp'},
    {src: './img/4.webp'},
    {src: './img/5.webp'},
    {src: './img/6.webp'},
    {src: './img/7.webp'}
]

// 加载图片
fall.load(imgList)

2、小程序中的用法

在微信小程序中，获取图片大小数据的方法和浏览器不一样，微信小程序提供了一个方法 wx.getImageInfo 来获取图片的信息。

// 首先我们需要定义一个微信小程序获取图片信息的方法
fall.setImgHandler(function(src, okCb, errCb) {
   console.log(src)
   wx.getImageInfo({
       src: src,
       success(obj){
           okCb({width:obj.width,height:obj.height})
       },
       fail(e){
           console.log('异常', e)
           errCb()
       },
       complete(){
           console.log('加载图片complete')
       }
   })
})
// 然后再进行数据加载
fall.load(imgList)