最終要實現的結果就是如左圖所示。

不過在微信小程序里面，不能通過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_