小程序 之两列瀑布流

一、效果图

 

 二、代码

<view class="content">
    <view class="left">
        <block wx:for="{{lists}}" wx:key="index">
            <template is="item" data="{{...item}}" wx:if="{{index%2==0}}"></template>
        </block>
    </view>
    <view class="right">
        <block wx:for="{{lists}}" wx:key="index">
            <template is="item" data="{{...item}}" wx:if="{{index%2==1}}"></template>
        </block>
    </view>
</view>

<template name="item">
    <view class="item" bindtap="goTo" data-url='../book/index?id={{id}}'>
        <image lazy-load="{{true}}" class="item-img" src="{{thumb}}" mode="widthFix"></image>
        <view class="item-title-box">
            <navigator url="url" class="item-title" hover-class="none">{{title}}</navigator>
        </view>
    </view>
</template>

.content{
  margin: 20rpx 20rpx;
  text-align: justify;
}  
.item{
  background-color: #fff;
  /* margin: 1%;  */
  margin-bottom: 20rpx;
  display: inline-block;
  width: 100%;
  /* padding: 10rpx; */
  box-sizing: border-box;
  box-shadow: 0 0 6rpx 6rpx rgba(0, 0, 0, .09);
}
.item-ava{
  width: 40rpx;
  height: 40rpx;
  border-radius: 20rpx;
}
.heart{
  width: 30rpx;
  height: 26rpx;
  margin-right: 8rpx;
}
.heart_{
  display: flex;
  align-items: center;
}
.item-img{
  width: 100%
  
}
.item-title{
  font-size: 24rpx;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  font-family: 'PingFang SC-Medium';
  color: #1e1e1e;
  margin: 15rpx;
  line-height: 27rpx;
}