微信小程序 简单实现图片瀑布流

简单实现图片瀑布流

<view class="container">
  <view class="box" wx:for='{
  {show}}' wx:key='key'>
    <image class="image" mode="widthFix" src="{
  {item.image}}"></image>
    <view class="info">
      <view>{
  {item.name}}</view>
    </view>
  </view>
</view>

.container {
  width: 740rpx;
  column-count: 2;
  column-gap: 10rpx;
}

.box {
  width: 350rpx;
  font-size: 10px;
  margin: 20rpx;
  background-color: #FFF;
  border-radius: 20rpx;
  display: inline-block;
}

.image {
  width: 350rpx;
  border-top-right-radius: 20rpx;
  border-top-left-radius: 20rpx;
}

.info {
  padding: 10rpx;
}

Page({ 
  data: {
    show:[
		{
			image: "图片0地址",
			name: "图片0文字描述"