微信小程序中如何制作瀑布流效果

微信小程序中如何制作瀑布流效果如图是

首先，页面布局，页面分为两个部分，左右各一部分，各自插入图片，页面代码如下：

<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

<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>

以上就是部分瀑布流的代码 整个具体的文件可以上我的github下载瀑布流demo地址