小程序和H5页面如何实现图片的瀑布布局

瀑布布局使用绝对定位的形式，这里使用waterfall-js来获取计算后的图片项的位置大小等信息，可以看到最终的效果图，示例代码可以参考 https://gitee.com/orz365/waterfall-js

可以看到，图片上的图片等列的显示，都是不等高的，对于这种像流水一样的布局，可以称为瀑布流的布局，对于不同大小的图片，这种布局方式是一种不错的选择。

我们使用一种js插件，waterfall-js插件，我们只要传入我们要展示的图片列表信息，它可以很快的计算出我们要展示的图片大小，并将图片的大小数据等返回给我们，这样我们只需要修改展示的样式。

浏览器中的使用

<!-- 首先需要引入js插件 -->
<script src="./waterfalljs.js"></script>

var columnCount = 3;
var windowWidth = window.innerWidth
var fall = new Waterfalljs({
    width: windowWidth,
    defaultHeight: 120,
    async: true,
    columnCount: columnCount,
    extHeight: 25,
    padding: {
        left: 10,
        right: 10,
        top: 10
    },
    itemGapH: 10,
    itemGapV: 10
})

var isLoading = false
fall.on('load', function(boxItem, index) {
   // boxItem中包含了一个图片的单个数据信息
})
fall.on('end', function(list) {
    // list 包含了所有图片的数据信息
    // load和end回调，看情况使用
})
imgList = [
    {
        "src": "图片地址",
        "w": 500,
        "h": 200
    },
    {"src": "图片地址",},
    {"src": "图片地址",}
]
fall.load(imgList)

小程序中的用法

在微信小程序中，获取图片大小数据的方法和浏览器不一样，微信小程序提供了一个方法 wx.getImageInfo 来获取图片的信息，也可以使用request加载图片信息

# 安装
npm install waterfalljs-lite

// 引用
const Waterfalljs = require('waterfalljs-lite')

// 首先我们需要定义一个微信小程序获取图片信息的方法
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)

出自：https://www.cssjs.cn/blog/29044905499d4f20a6315eaa518663e9