微信小程序實現圖片瀑布流

<view class='content'>
<view class='left'>
  <block wx:for="{{leftList}}" wx:key="index">
    <image class='pic'  style='height:{{item.CoverHeight}}' src='{{item.Cover}}' bindtap="preview" data-url="{{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}}' bindtap="preview" data-url="{{item.Cover}}" ></image>
  </block>
</view>
</view>

↑ wxml代碼

↓ JS代碼

// pages/goods/goods.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {

    noramalData: [{
      "Cover": "http://dashus.oss-cn-shenzhen.aliyuncs.com/DefaultImage/Game/20190306144842/1001.png",
      "CoverHeight": 467,
      "CoverWidth": 350
    },
    {
      "Cover": "cloud://acturis-3fcf85.6163-acturis-3fcf85/zao_chegnshu2.jpg",
      "CoverHeight": 871,
      "CoverWidth": 672
    },{
      "Cover": "cloud://acturis-3fcf85.6163-acturis-3fcf85/zao_chengshu.jpg",
      "CoverHeight": 467,
      "CoverWidth": 350
    },
    {
      "Cover": "cloud://acturis-3fcf85.6163-acturis-3fcf85/pic_1.jpg",
      "CoverHeight": 871,
      "CoverWidth": 672
    },{
      "Cover": "cloud://acturis-3fcf85.6163-acturis-3fcf85/summer_3.jpg",
      "CoverHeight": 467,
      "CoverWidth": 350
    },
    {
      "Cover": "cloud://acturis-3fcf85.6163-acturis-3fcf85/summer_small.jpg",
      "CoverHeight": 2000,
      "CoverWidth": 1500
    },
  ],
   imgarray:[
     "http://dashus.oss-cn-shenzhen.aliyuncs.com/DefaultImage/Game/20190306144842/1001.png",
    'cloud://acturis-3fcf85.6163-acturis-3fcf85/zao_chegnshu2.jpg',
    'cloud://acturis-3fcf85.6163-acturis-3fcf85/zao_chengshu.jpg',
    'cloud://acturis-3fcf85.6163-acturis-3fcf85/pic_1.jpg',
    'cloud://acturis-3fcf85.6163-acturis-3fcf85/summer_3.jpg',
    'cloud://acturis-3fcf85.6163-acturis-3fcf85/summer_small.jpg',
  ],
  leftList: [],
  rightList: [],
  leftHight: 0,
  rightHight: 0
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
   //以本地數據為例，實際開發中數據整理以及加載更多等實現邏輯可根據實際需求進行實現   
onLoad: function(options) {
  var that = this;
  var allData = that.data.noramalData;
  //定義兩個臨時的變量來記錄左右兩欄的高度，避免頻繁調用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";//因為xml文件中直接引用的該值作為高度，所以添加對應單位
    if (leftH == rightH || leftH < rightH) {//判斷左右兩側當前的累計高度，來確定item應該放置在左邊還是右邊
      leftData.push(allData[i]);
      leftH += currentItemHeight;
    } else {
      rightData.push(allData[i]);
      rightH += currentItemHeight;
    }
  }

  //更新左右兩欄的數據以及累計高度
  that.setData({
    leftHight: leftH,
    rightHight: rightH,
    leftList: leftData,
    rightList: rightData
  })
},
// })

  /**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函數--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命周期函數--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函數--監聽頁面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {

  }, 
   //預覽圖片，放大預覽
  preview(event) {
    console.log(event)
    let currentUrl = event.currentTarget.dataset.url
    console.log('the currentUrl you click is the:')
    console.log(currentUrl)
    wx.previewImage({
      current: currentUrl, // 當前顯示圖片的http鏈接
      urls: this.data.imgarray // 需要預覽的圖片http鏈接列表
    })
  }
})

 

注：imgArray主要是為了點擊圖片預覽所用