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

旧城等待， 2022-09-01 07:57 287阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3MDAxeA_size_16_color_FFFFFF_t_70][]

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

我们使用一种js插件，waterfall-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][https_www.cssjs.cn_blog_29044905499d4f20a6315eaa518663e9]

[https_gitee.com_orz365_waterfall-js]: https://gitee.com/orz365/waterfall-js
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3MDAxeA_size_16_color_FFFFFF_t_70]: /images/20220829/a8059972730c4201bb6acd65722ef358.png
[https_www.cssjs.cn_blog_29044905499d4f20a6315eaa518663e9]: https://www.cssjs.cn/blog/29044905499d4f20a6315eaa518663e9