小程序?qū)崿F(xiàn)瀑布流

近期在做APP轉(zhuǎn)成小程序的相關(guān)開發(fā)，需將APP里面的部分頁面抽離出來，做成小程序。
其中有個(gè)頁面是瀑布流(參差不齊的多欄布局)的形式。
Android客戶端一般是通過RecyclerView的方式來進(jìn)行實(shí)現(xiàn)，但在小程序中并沒有類似的控件，所以我們只有通過自己的改編來進(jìn)行實(shí)現(xiàn)。特此記錄！

• 實(shí)現(xiàn)效果如圖

index.png

一：需求分析

• 頁面主要分成兩列，每個(gè)條目的高度不固定，條目主要由封面圖+標(biāo)題+頭像+發(fā)布者昵稱組成

• 多列排列要求，第一條在左側(cè)，第二條在右側(cè)，后續(xù)的根據(jù)左右兩欄的高度，依次放置在高度較低的一側(cè)。

二：技術(shù)實(shí)現(xiàn)思路

• 1、將整個(gè)頁面分成左右兩欄，兩側(cè)各對(duì)應(yīng)一個(gè)數(shù)據(jù)集。

• 2、定義變量，記錄左右兩側(cè)的累計(jì)高度，然后依次將條目放置在高度較低的一側(cè)。從而我們可以得到左右兩側(cè)的數(shù)據(jù)集，后續(xù)只需要進(jìn)行頁面的渲染就行了；

• 3、圖片高度的確定，單個(gè)條目中圖片寬度=(單列條目寬度/圖片的原始寬度)*圖片原始高度；

三：思路有了，接下來就是開始編寫代碼了

• 1、編寫布局，將整個(gè)頁面分成兩欄xml代碼如下

  <view class='content'>
  <view class='left'>
    <block wx:for="{{leftList}}" wx:key="index">
      <image class='pic' style='height:{{item.CoverHeight}}' src='{{item.Cover}}'></image>
    </block>
  </view>
  <view class='right'>
    <block wx:for="{{rightList}}" wx:key="index">
      <image class='pic' style='height:{{item.CoverHeight}}' src='{{item.Cover}}'></image>
    </block>
  </view>
  </view>
  

• 2、編寫樣式代碼如下

  page{
    width: 100%;
    margin: 0;
    background: #F2F2F2;
  }
  .content{
    display: flex;
    flex-direction: row;
    margin: 20rpx;
    overflow: hidden;
  }
  
  .left{
    width: 345rpx;
  }
  
  .right{
    width: 345rpx;
    margin-left: 20rpx;
  }
  
  .pic{
    border-radius: 10rpx;
    width: 345rpx;
  }
  

• js代碼如下：

  Page({
  
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
  
    noramalData: [{
        "Cover": "http://dashus.oss-cn-shenzhen.aliyuncs.com/DefaultImage/Game/20190306144842/1001.png",
        "CoverHeight": 467,
        "CoverWidth": 350
      },
      {
        "Cover": "http://dashus.oss-cn-shenzhen.aliyuncs.com/DefaultImage/Game/20190313090409/完美9.png",
        "CoverHeight": 871,
        "CoverWidth": 672
      }
    ],
  
    leftList: [],
    rightList: [],
    leftHight: 0,
    rightHight: 0
  },
    //以本地?cái)?shù)據(jù)為例，實(shí)際開發(fā)中數(shù)據(jù)整理以及加載更多等實(shí)現(xiàn)邏輯可根據(jù)實(shí)際需求進(jìn)行實(shí)現(xiàn)   
  onLoad: function(options) {
    var that = this;
    var allData = that.data.noramalData;
    //定義兩個(gè)臨時(shí)的變量來記錄左右兩欄的高度，避免頻繁調(diào)用setData方法
    var leftH = that.data.leftHight;
    var rightH = that.data.rightHight;
    var leftData = [];
    var rightData = [];
    for (let i = 0; i < allData.length; i++) {
      var currentItemHeight = parseInt(Math.round(allData[i].CoverHeight * 345 / allData[i].CoverWidth));
      allData[i].CoverHeight = currentItemHeight + "rpx";//因?yàn)閤ml文件中直接引用的該值作為高度，所以添加對(duì)應(yīng)單位
      if (leftH == rightH || leftH < rightH) {//判斷左右兩側(cè)當(dāng)前的累計(jì)高度，來確定item應(yīng)該放置在左邊還是右邊
        leftData.push(allData[i]);
        leftH += currentItemHeight;
      } else {
        rightData.push(allData[i]);
        rightH += currentItemHeight;
      }
    }
  
    //更新左右兩欄的數(shù)據(jù)以及累計(jì)高度
    that.setData({
      leftHight: leftH,
      rightHight: rightH,
      leftList: leftData,
      rightList: rightData
    })
  },})
  

四：實(shí)現(xiàn)該效果需要注意的點(diǎn)。

• 1.左右兩欄布局的確定
• 2.每張圖片高度的計(jì)算
• 3.根據(jù)左右兩欄的高度，確定每個(gè)item的擺放位置。