这个是我做的瀑布流的效果，如果想要这样效果的可参考下。
首先在微信开发者工具的页面中写出来这种两列的格式，左边一部分右边一部分，代码如下：
<view class="city_history">
<view class="history_content">
<scroll-view scroll-y="true" style="height: {{ windowHeight }}px; width: {{ windowWidth }}px;" bindscrolltolower="loadMore" >
<view class="left">
<view wx:for="{{trips}}" wx:for-item="item" wx:key="" >
<template is="m-history" wx:if="{{index%2==0}}" data="{{ trip : item}}" />
</view>
</view>
<view class="right">
<view wx:for="{{trips}}" wx:for-item="item" wx:key="">
<template is="m-history" wx:if="{{index%2==1}}" data="{{ trip : item}}" />
</view>
</view>
</scroll-view>
</view>
</view>
样式代码如下：
/**index.wxss**/
.city_history{
margin-top:10px;
padding-top:5px;
border-top:1px #dadada solid;
}
.history_content{
clear:both;
overflow: hidden;
width:100%;
}
.history_content .left,.history_content .right{
width:49%;
}
.history_content .left{
float:left;
}
.history_content .right{
float:right;
}
.history_item{
display: inline-block;
background:#fff;
margin-bottom: 20px;
border-radius: 10px;
width:100%;
}
.item-img{
width:100%;
border-radius: 10px 10px 0 0 ;
}
.item-title{
padding:10px;
font-size: 14px;
font-family: ‘PingFang SC-Medium‘;
color: #1e1e1e;
}
.item-ava{
width: 35px;
height: 35px;
border-radius: 100%;
float:left;
margin-right:10px;
}
.history_auth_name{
padding:0 0 10px 10px;
}
.name-title{
font-size:12px;
font-family: ‘PingFang SC-Medium‘;
color: #1e1e1e;
display: block;
}
外部的components代码如下：
<!--conponents/history.wxml-->
<text>conponents/history.wxml</text>
<template name="m-history" class="history_item">
<view class="history_item">
<image class="item-img" src="{{trip.cover_image}}" mode="widthFix"></image>
<view class="item-title-box">
<view url="url" class="item-title">{{trip.name}}</view>
</view>
<view class="history_auth_name">
<image class="item-ava" src="{{trip.cover_image_default}}"></image>
<text class="name-title">{{trip.desc}}</text>
<text class="name-title">2018-12-1</text>
</view>
</view>
</template>
以上就是部分瀑布流的代码 整个具体的文件可以上我的github下载https://github.com/chengwenxia1100/pbl