瀑布流布局 流式布局 不规则图文排列布局 微信小程序按顺序排列的瀑布流布局

微信小程序按顺序排列的瀑布流布局

首先我说一下，我的项目需求：

1. 瀑布流布局排列
2. 按照一定的顺序排列
3. 图文结合

不好意思，跟大家分享下我的过程，不想看的直接跳过看最后，

起初的实现思路是：

1、由于图片是从后台获取的，大家都知道image 有一个bindload事件，就是图片加载完成，就是在图片加载完成后获取到该图片的高度，然后通过既定的宽度，算出图片的实际显示高度。
2、知道了图片的实际显示高度，就该计算图片到底是放在左边还是右边，为了方便计算，我们将所有图片列表一分为二，然后如果左边小于等于右边，就将刚加载完成的这张图片放在左边，很容易这样就形成了瀑布流。当然这些可能都是大家所熟知的。
3、瀑布流实现了，可是每个图片加载完成的顺序跟后台给的顺序不同，导致每次打开瀑布流看到的顺序都不同，不符合我们的需求。

第一次调整：

为了达到按照后台给的顺序排列，我们做了下列调整：
多添加了一个事件，利用index 控制每次按照顺序 加载下一张，然后根据高度再决定放左边还是右边，哇塞，功夫不负有心人，果然实现了，
可是问题又来了，呵呵哒，要求的顺序也做到了，加载速度慢的想砸手机（哈哈哈……只是某些手机特别慢啦），毕竟我们的小程序是供老年人用的，所以……你懂的，

第二次调整：

如何让加载速度变快一些呢？当然要排除额外付费的情况，哈哈哈……
经过分析，为什么加载速度慢？首先每次图片加载的时候都要重新计算高度，所以我们想到了，在后台的数据中添加了图片的宽度和高度的值，这样就避免了每次都要在bindload时计算图片的实际显示高度，可以从后台获取列表对数据处理的同时，直接拿到高度，然后根据宽高比，计算出高度，然后根据左右两边高度比较，确定放置在哪一边，然后将高度加在左边或右边。这样实现的好处
第一：无需等图片加载完毕，就可以确定图片放置的位置，
第二，可以无需考虑之前的排序问题。
第三：代码缩减了N行
第四：加载速度超级快呀（这才是我想要的啦）

抱歉给你们看了这么多废话，下面是重点：

效果是这样滴
有需要的朋友可以直接去下载demo ，如果觉得还可以借用您发财的小手为我点亮star,地址为：https://github.com/taurus888/waterFlowDemo

原谅我是个娃娃控

主要代码

getImageList(){
    /*
      第一步计算出每个图片的高度
      第二步判断放置在哪边
    */
    let _this = this;
    let imageList = this.data.imageList; //假装我们从后台拿到了列表

    for(let i=0;i<imageList.length;i++){  
       
        let imgWidth = _this.data.imgWidth;  
        let oImgW = imageList[i].imageWidth;
        

        let col1 = _this.data.col1;
        let col2 = _this.data.col2;
        var hotListLeftHeightTemp = _this.data.hotListLeftHeight;
        var hotListRightHeightTemp = _this.data.hotListRightHeight;

        //比例计算
        let scale = imgWidth / oImgW;
        imageList[i].imageHeight = imageList[i].imageHeight * scale;      //自适应高度
        imageList[i].imageHeight += 60;


        if (hotListLeftHeightTemp <= hotListRightHeightTemp) {
          hotListLeftHeightTemp += imageList[i].imageHeight;
          col1.push(imageList[i])
        } else {
          hotListRightHeightTemp += imageList[i].imageHeight;
          col2.push(imageList[i])
        }

        _this.setData({
          hotListLeftHeight: hotListLeftHeightTemp,
          hotListRightHeight: hotListRightHeightTemp,
          col1: col1,
          col2: 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.getImageList() 
  },