小程式中的瀑布流

瀑布流是一種很常見的網頁佈局，視覺表現為參差不齊的多欄佈局，是一種時下很流行的佈局形式，最近在寫小程序恰好也碰到了，想了幾種不同的實作方法，接下來就來一起看看具體的實作方法（所用的方法中用的例子都是兩欄的版面）。

等高的瀑布流

等高的瀑布流顧名思義就是瀑布流裡的單一盒子的高度都是一樣的，這種形式的瀑布流實現起來也比較簡單，因為不涉及到盒子高度的計算，舉個例子：

<view>
  <view></view>
</view>

Page({
  data: {
    list: []
  },
  onLoad () {
    let images = []
    for (let i = 0; i <pre class="brush:php;toolbar:false">.fall {
  display: flex;
  flex-wrap: wrap;
  background-color: #f7f7f7;
}
.fall-item {
  width: 330rpx;
  height: 330rpx;
  margin-top: 30rpx;
  margin-left: 30rpx;
  background-color: aquamarine;
}

為了方便，例子中的盒子內容並沒有使用圖片，而是使用了色塊代替，等高瀑布流的實現可以直接通過flex佈局實現，如例子所示，直接用flex佈局，允許換行，設置好瀑布流里中每一個盒子的寬高，就能實現簡單的實現兩欄瀑布流佈局

不等高瀑布流

不等高瀑布流是更為常見的形式，不等高瀑布流涉及到列高的計算，由於每個盒子的高度不一樣，因此需要每一列的列高都要記錄、比較，將下一個盒子插入高度矮的一列，接下來就來看看不等高瀑布流的實現方式

#已知盒子高度

#一般瀑布流裡展示的都是圖片，這種情況指的是服務端會返給前端要展示的圖片的寬高，這種情況下相對也比較簡單，因為服務端會返回圖片的寬高，前端只需要計算一下列高，將下一張圖片插入矮的那裡一列就可以，舉個例子：

<view>
  <view>
    <view></view>
  </view>
</view>

.fall {
  display: flex;
  background-color: #f7f7f7;
}

.fall-column {
  display: flex;
  flex-direction: column;
  margin-left: 30rpx;
}

.fall-column-item {
  width: 330rpx;
  margin-top: 30rpx;
  background-color: aquamarine;
}

Page({
  data: {
    images: [{
      width: 360,
      height: 540
    }, {
      width: 480,
      height: 540
    }, {
      width: 540,
      height: 720
    }, {
      width: 720,
      height: 960
    }, {
      width: 540,
      height: 960
    }, {
      width: 360,
      height: 720
    }, {
      width: 360,
      height: 960
    }, {
      width: 540,
      height: 540
    }, {
      width: 540,
      height: 1440
    }, {
      width: 960,
      height: 1440
    }],
    heightArr: [],
    list: [],
    col: 2
  },
  onLoad () {
    this.initData(2)
  },
  initData (col) {
    let images = []
    let scale = 2
    // 模拟图片宽高
    for (let i = 0; i <p>上例中為了方便也是用色塊模擬了圖片，在js中模擬了10張圖片的寬高，每次從中隨機取10張圖片，定義了兩列，每次計算一下每列的高度，將圖片插入矮的那一列，然後將記錄用高度數組，將圖片的高度累加，實現起來也很簡單</p><h3>未知盒子高度</h3><p>未知盒子高度的情況下，我們要怎麼做呢？ </p><h4>wx.getImageInfo</h4><p>第一種辦法就是透過wx.getImageInfo可以取得到圖片寬高信息，舉個例子：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><view>
  <view>
    <view>
      <image></image>
    </view>
  </view>
</view>

登入後複製

登入後複製