Implement waterfall flow layout and infinite loading in WeChat mini program

Waterfall flow layout is a popular page layout method, the most typical one is Pinterest.com , the height of each card is different, creating an uneven aesthetic.

In HTML5, we can find many waterfall flow layout plug-ins based on jQuery and the like to easily create such a layout form. In WeChat Mini Program, we can also achieve this effect, but due to some characteristics of the mini program framework, there are still some differences in implementation ideas.

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

Waterfall flow layout of small program

What we want to implement is a fixed 2-column layout, and then dynamically load the image data into In these two columns (the loaded image will be placed in the left column or the right column based on the actual size of the image).

#/* Style of a single image container*/.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() to create A picture object, and then use it to dynamically load the picture pointed to by the url and obtain the actual size of the picture and other information. In the mini program framework, there is no corresponding JS object provided 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 can still meet our functional requirements.

#

##We can pass data binding in Page to pass the request Load the image information into wxml, let the component load the image resource, and 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 size after scaling the image according to the actual size that needs to be displayed on the page. 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
       });
   }

})

  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 is the wxml code that displays the two-column image, we can see it 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>

##

The above is the detailed content of Implement waterfall flow layout and infinite loading in WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!