WeChat applet implements waterfall flow layout and unlimited loading

Waterfall flow layout is a popular page layoutMethod, the most typical one is Pinterest.com. The height of each card is different, forming an uneven beauty.

In HTML5, we can find many based on it. Waterfall layout plug-ins such as jQuery can easily create such a layout. In the WeChat applet, we can also achieve this effect, but due to the mini programframework There are still some differences in implementation ideas for some features.

Today we will take a look at how to implement this waterfall flow layout in a small program:

Small program waterfall flow layout

What we want to implement is a fixed 2-column layout, and then dynamically load the picture data into these two columns (while loading The incoming image will be placed in the left column or the right column according to the actual size of the image)

/* 单个图片容器的样式 */
.img_item {
  width: 48%;
  margin: 1%;
  display: inline-block;
  vertical-align: top;
}

We know that in HTML, if we want to dynamically load images, we usually use #. ##new Image() creates an image object, and then uses it to dynamically load an image pointed to by the url, and obtain the actual size of the image and other information. In the mini program framework, there is no such thing. Provide corresponding JS objects to handle image loading. In fact, we can use the component in wxml to complete such a function. Although it is a bit convoluted, it still satisfies us. Functional requirements.

<!-- 在页面上放一个隐藏区域，并用image组件去加载一个或多个图片资源 -->
<view style="display:none">
  <image wx:for="{{images}}" wx:key="id" id="{{item.id}}" src="{{item.pic}}" bindload="onImageLoad"></image>
</view>

We can pass the image information to be loaded to wxml through

data binding, and let the component load the image resource. Then when the image is loaded, further processing is done through the event processing function specified by bindload.

Let's take a look at the onImageLoad function defined in the Page file. In it, we can obtain rich information about the component from the incoming event object e, including the actual size of the image loaded through it. Then we calculate the image according to the actual size that needs to be displayed on the page. The size after scaling is the same. Then, we can decide which side to put the currently loaded image on based on the current accumulated content height of the left and right columns.

let col1H = 0;
let col2H = 0;

Page({

    data: {
        scrollH: 0,
        imgWidth: 0,
        loadingCount: 0,
        images: [],
        col1: [],
        col2: []
    },

    onLoad: function () {
        wx.getSystemInfo({
            success: (res) => {
                let ww = res.windowWidth;
                let wh = res.windowHeight;
                let imgWidth = ww * 0.48;
                let scrollH = wh;

                this.setData({
                    scrollH: scrollH,
                    imgWidth: imgWidth
                });

                //加载首组图片
                this.loadImages();
            }
        })
    },

    onImageLoad: function (e) {
        let imageId = e.currentTarget.id;
        let oImgW = e.detail.width;         //图片原始宽度
        let oImgH = e.detail.height;        //图片原始高度
        let imgWidth = this.data.imgWidth;  //图片设置的宽度
        let scale = imgWidth / oImgW;        //比例计算
        let imgHeight = oImgH * scale;      //自适应高度

        let images = this.data.images;
        let imageObj = null;

        for (let i = 0; i < images.length; i++) {
            let img = images[i];
            if (img.id === imageId) {
                imageObj = img;
                break;
            }
        }

        imageObj.height = imgHeight;

        let loadingCount = this.data.loadingCount - 1;
        let col1 = this.data.col1;
        let col2 = this.data.col2;

        //判断当前图片添加到左列还是右列
        if (col1H <= col2H) {
            col1H += imgHeight;
            col1.push(imageObj);
        } else {
            col2H += imgHeight;
            col2.push(imageObj);
        }

        let data = {
            loadingCount: loadingCount,
            col1: col1,
            col2: col2
        };

        //当前这组图片已加载完毕，则清空图片临时加载区域的内容
        if (!loadingCount) {
            data.images = [];
        }

        this.setData(data);
    },

    loadImages: function () {
        let images = [
            { pic: "../../images/1.png", height: 0 },
            { pic: "../../images/2.png", height: 0 },
            { pic: "../../images/3.png", height: 0 },
            { pic: "../../images/4.png", height: 0 },
            { pic: "../../images/5.png", height: 0 },
            { pic: "../../images/6.png", height: 0 },
            { pic: "../../images/7.png", height: 0 },
            { pic: "../../images/8.png", height: 0 },
            { pic: "../../images/9.png", height: 0 },
            { pic: "../../images/10.png", height: 0 },
            { pic: "../../images/11.png", height: 0 },
            { pic: "../../images/12.png", height: 0 },
            { pic: "../../images/13.png", height: 0 },
            { pic: "../../images/14.png", height: 0 }
        ];

        let baseId = "img-" + (+new Date());

        for (let i = 0; i < images.length; i++) {
            images[i].id = baseId + "-" + i;
        }

        this.setData({
            loadingCount: images.length,
            images: images
        });
    }

})

Here are the two columns of images. wxml code, we can see that on the component, we set up the event listening function by using bindscrolltolower. When scrolling to the bottom, loadImages will be triggered to load the next set of image data, thus forming Infinite loading:

<scroll-view scroll-y="true" style="height:{{scrollH}}px" bindscrolltolower="loadImages">
  <view style="width:100%">
    <view class="img_item">
      <view wx:for="{{col1}}" wx:key="id">
        <image src="{{item.pic}}" style="width:100%;height:{{item.height}}px"></image>
      </view>
    </view>
    <view class="img_item">
      <view wx:for="{{col2}}" wx:key="id">
        <image src="{{item.pic}}" style="width:100%;height:{{item.height}}px"></image>
      </view>
    </view>
  </view>
</scroll-view>

Okay, it’s a simple example. If you have a better method, please feel free to share it.

The above is the detailed content of WeChat applet implements waterfall flow layout and unlimited loading. For more information, please follow other related articles on the PHP Chinese website!