Implement waterfall stream layout and unlimited loading in WeChat applets

Waterfall Stream layout is a popular page layout method. The most typical is Pinterest.com. the height of each card is different, forming a different aesthetic. In HTML5, we can find many waterfall stream layout plug-ins based on jQuery and other implementations...

In HTML5, we can find many waterfall stream layout plug-ins based on jQuery and other implementations to easily make such layout forms. InAppletWe can also make such an effect, but due to some features of the mini-program framework, there are still some differences in implementation ideas.

Today, let's take a look at howAppletTo achieve this waterfall flow layout:

We can use data binding in the Page to transfer the image information to wxml, so thatThe component loads image resources. when the image is loaded, it uses the event processing function specified by bindload for further processing.

Let's take a look at the onImageLoad function defined in the Page file. Here, we can obtainThe rich information of the component, including the actual size of the image loaded through it. Then, we calculate the scaled size of the image based on the actual size on the page. Next, we can decide which side to put the currently loaded image based on the accumulated content height in 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. required wwidth; let wh = res. optional wheight; let imgWidth = ww * 0.48; let scrollH = wh; this. setData ({scrollH: scrollH, imgWidth: imgWidth}); // load the first group of images this. loadImages () ;}}) }, onImageLoad: function (e) {let ImageId = e. currentTarget. id; let oImgW = e. detail. width; // original image width let oImgH = e. detail. height; // original image height let imgWidth = this. data. imgWidth; // let scale = imgWidth/oImgW; // let imgHeight = oImgH * scale; // adaptive height 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;} imageO Bj. height = imgHeight; let loadingCount = this. data. loadingCount-1; let col1 = this. data. col1; let col2 = this. data. col2; // Determine whether the current image is added to the left or right column if (col1H <= col2H) {col1H + = imgHeight; col1.push (imageObj);} else {col2H + = imgHeight; col2.push (imageObj);} let data = {loadingCount: loadingCount, col1: col1, col2: col2}; // The current set of images has been loaded, then clear the content of the temporary loading area of the image 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 shown in two columns of images. On the component, we set the event listening function by using bindscrolltolower. when scrolling to the bottom, it triggers loadImages to load the next group of image data, in this way, infinite loading is formed:

The above is the details of Waterfall Stream layout and unlimited loading in the applet. For more information, see other related articles in the first PHP community!