小程序瀑布流无限加载

由于想做成瀑布流，故一开始使用如下的方式：

.waterfall-container {
    column-count: 2;
    column-gap: 30rpx;
}

但是，由于这种 column-count:2 ，是由上往下排的，所以再加载新的一页的时候，原来在页首的会被顶到底部，导致整个逻辑是错误的。

故，需要修改一下页面的实现思路

1. 在页首加入预加载的图片的不显示的块，加载图片时，会触发事件，

2. 在事件处理 function 中，进行图片的分发，根据当前的两列的实际高度，分发到两列中。

具体实现：

在页首加上 display: none 的块，用于预加载图片。

<view style="display:none">
    <image wx:for="{{prefetch_products.rows}}" data-id="{{item.id}}" data-image-src="{{item.cover}}" wx:for-item="item" src="{{item.cover}}"
        bindload="onImageLoad"></image>
</view>

JS:

onImageLoad: function (e) {
        var oriHeight = e.detail.height,
            oriWidth = e.detail.width,
            scale = oriHeight / oriWidth,
            destWidth = this.data.imageWidthRpx * rpxScale,     // 在不同机型中的具体图片宽度
            destHeight = scale * destWidth,
            id = e.currentTarget.dataset.id,
            src = e.currentTarget.dataset.imageSrc;

        // 分发到两边
        var col1 = this.data.col1,
            col2 = this.data.col2,
            loadingCount = this.data.loadingCount;

        // 比较两边的height
        // 哪个矮分发到哪个
        if (col1.height <= col2.height) {
            col1.images.push({
                id: id,
                src: src
            });
            col1.height += (destHeight + 39 * rpxScale); // 补偿 padding 的高度
            --loadingCount;
        } else {
            col2.images.push({
                id: id,
                src: src
            });
            col2.height += (destHeight + 39 * rpxScale); // 补偿 padding 的高度
            --loadingCount;
        }

        if (!loadingCount) {
            this.setData({
                prefetch_products: []
            });
        }

        this.setData({
            loadingCount: loadingCount,
            col1: col1,
            col2: col2
        });
    }

来源：https://www.cnblogs.com/au_ww/p/7149645.html

标签

瀑布流

src