微信小程序,几行代码实现图片瀑布流

iPhone X效果:

iPad Pro 效果:

js 代码:

Page({
  data: {
    list:[]
  },
  onLoad: function (options) {
          this.setData({
            list: [
            {"url":"../../image/Yoko1.jpg"}
            ,{"url":"../../image/Yoko1.jpg"},
            {"url":"../../image/無題.jpg"},
            {"url":"../../image/水族館1.jpg"},
            {"url":"../../image/texas.jpg"}
            ,]
          })
  }
})

wxml:

<view class='container'>
    <image src='{{item.url}}'  wx:for="{{list}}" mode='widthFix' wx:key="{{index}}"></image>
</view> 

css

.container{
  column-count: 2;
  column-gap:2rpx;
  padding-left: 8rpx;
}
image{
  width: 360rpx;
  box-shadow: 2px 2px 4px rgba(0,0,0,.4);
  overflow-y: scroll;
  border-radius: 30px 30px 30px 30px;
  -moz-border-radius: 25px;
  -webkit-overflow-scrolling: touch;
}