# waterfall-js

**Repository Path**: orz365/waterfall-js

## Basic Information

- **Project Name**: waterfall-js
- **Description**: 计算图片的瀑布布局 js
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-07-08
- **Last Updated**: 2023-12-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 瀑布, 布局, 图片

## README

## waterfall-js 

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

### 示例图
![avatar](demo/img/demo.gif)

### 配置项
- **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、浏览器中的用法
```javascript
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` 来获取图片的信息。
```javascript
// 首先我们需要定义一个微信小程序获取图片信息的方法
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)
```