最终要实现的结果就是如左图所示。

不过在微信小程序里面，不能通过JavaScript来直接操作dome，所以一些常用的方法在这里都没有办法用了。这让笔者非常着急，因为项目比较赶，不能因为这种低级的布局问题拖慢了进度。

百度了半天，发现了css3的column这个属性，但是最后实现出来的方法就如右图所示，这不符合需求，需求是两列，从左到右进行排列的，大概就像小红书APP那种瀑布流布局

最后笔者终于找到一种非常诡异的方法，哈哈，废话不多说，直接上代码

1. <view class="content">
2. <view class="left">
3. <block wx:for="{{note}}" wx:key="">
4. <template is="item" data="{{...item}}" wx:if="{{index%2==0}}"></template>
5. </block>
6. </view>
7. <view class="right">
8. <block wx:for="{{note}}" wx:key="">
9. <template is="item" data="{{...item}}" wx:if="{{index%2==1}}"></template>
10. </block>
11. </view>
12. </view>》
13. <!-- 下面是一个模块 -->
14. <template name="item">
15. <view class="item">
16. <image class="item-img" src="{{url}}" mode="widthFix"></image>
17. <view class="item-title-box">
18. <navigator url="url" class="item-title">{{title}}</navigator>
19. <image class="arrow" src="../../image/arrow.png"></image>
20. </view>
21. <view class="name">
22. <image class="item-ava" src="{{avatar}}"></image>
23. <text class="name-title">{{name}}</text>
24. <view class="heart_">
25. <image class="heart" src="../../image/heart.png"></image>
26. <text>{{heart_num}}</text>
27. </view>
28. </view>
29. </view>
30.  
31. </template>

CSS样式

1. .content{
2. margin: 0 20rpx;
3. text-align: justify;
4. }
5. .item{
6. background-color: #fff;
7. margin: 1%;
8. margin-bottom: 20rpx;
9. display: inline-block;
10. }
11. .item-ava{
12. width: 40rpx;
13. height: 40rpx;
14. border-radius: 20rpx;
15. }
16. .heart{
17. width: 30rpx;
18. height: 26rpx;
19. margin-right: 8rpx;
20. }
21. .heart_