小程序实现瀑布流效果

思路 ： 

  宽度固定，高度自适应，分为左右两部分，根据当前的数据数来判断，如果index的值等于0，数据添加到左侧列表中，若等于index等于1添加到右侧列表中

效果如下:

  

代码

wxml

	<!-- 瀑布流 -->
	<view class="xg_all">
	<view class="xg_content">
			<view class="content_l">
				<block  s-for="item,index in  alumList">
				<view class="content_item"   s-if="{{index%2==0}}" data-id="{{item.id}}" bindtap="toggleDetail">
				  <image src="http://g-image.yesky.com/{{item.image}}" mode="widthFix" class="item_img" />
				  <view class="item_title">{{item.title}}</view>
				  <!-- 页数 -->
				  <view class="item_ys" s-if="item.number > 1">{{item.number}}张</view>
				</view>
				</block>
			</view>

			<view class="content_r">
				<block  s-for="item,index in  alumList">
				<view class="content_item"   s-if="{{index%2==1}}" data-id="{{item.id}}" bindtap="toggleDetail">
				  <image src="http://g-image.yesky.com/{{item.image}}" mode="widthFix"  class="item_img" />
				  <view class="item_title">{{item.title}}</view>
				   <!-- 页数 -->
				  <view class="item_ys" s-if="item.number > 1">{{item.number}}张</view>
				</view>
				</block>
			</view>
	
	</view>
	</view>

css

.xg_all{
  margin-top:120rpx; 
  padding-top:5px;
  padding:0 20rpx;
  overflow:hidden;
  box-sizing: border-box;
  
}
.xg_content{
  clear:both !important;
  overflow: hidden;
  width:100%;
}
.xg_content .content_l,
.xg_content .content_r{
    width:48%;
    overflow:hidden;
    margin: 26rpx 0;
}
.xg_content .content_l{
      float:left;
}
.xg_content .content_r{
      float:right;
}
.xg_content .content_item{
  display: inline-block;
  background:#fff;
  margin-bottom: 20px;
  width:100%;
  position:relative;
}
.xg_content .content_item .item_img{
   width:100%;
}
.xg_content .content_item .item_title{
    font-size:28rpx;
    text-align:center;
    padding:10px 10rpx;
}