小程序-两列瀑布流布局
新的设计图是按两列瀑布流排版的，类似于花瓣网那种。看到设计图后就在网上找，如何在小程序简单的实现，后来找到了一个特别简单的方法，就是利用wx:if和数组的下标对2取余来判断是排在左列还是排在右列， 话不多说看图上代码： 
wxml:
<view class='footlist'>
<view class="foot-left">
<block wx:for="{{list}}" wx:key="{{ item.id }}">
<view class='footbox' catchtap='jumpdetail' catchlongtap="deletefoot" bindtouchend="touchend" id="{{item.id}}" wx:if="{{index%2==0}}" data-cover="{{item.banner}}" data-title="{{item.title}}">
<image class='cover' src="{{item.banner}}" mode="widthFix"></image>
<view class="box-shadow">
<text class='t1'>{{item.title}}</text>
<view class='bot'>
<view class='personbox' data-userid="{{item.userid}}" catchtap="toProfile">
<image src="{{item.userinfo.avatarurl}}"></image>
<text class="username">{{item.userinfo.nickName}} </text>
</view>
<view class='thump' data-fid='{{item.id}}' catchtap='thumptap'>
<image class='un' data-fid='{{item.id}}' wx:if="{{item.islike=='1'}}" catchtap='unthumptap' src="../../images/thumph.png"></image>
<view style="color:red;">❤ </view>
<view class='thumpnum'>{{item.like}}</view>
</view>
</view>
</view>
</view>
</block>
</view>
<view class="foot-right">
<block wx:for="{{list}}" wx:key="{{ item.id }}">
<view class='footbox' catchtap='jumpdetail' catchlongtap="deletefoot" bindtouchend="touchend" id="{{item.id}}" wx:if="{{index%2==1}}" data-cover="{{item.banner}}" data-title="{{item.title}}">
<image class='cover' src="{{item.banner}}" mode="widthFix"></image>
<view class="box-shadow">
<text class='t1'>{{item.title}}</text>
<view class='bot'>
<view class='personbox' data-userid="{{item.userid}}" catchtap="toProfile">
<image src="{{item.userinfo.avatarurl}}"></image>
<text class="username">{{item.userinfo.nickName}}</text>
</view>
<view class='thump' data-fid='{{item.id}}' catchtap='thumptap'>
<image class='un' data-fid='{{item.id}}' wx:if="{{item.islike=='1'}}" catchtap='unthumptap' src="../../images/thumph.png"></image>
<view style="color:red;">❤</view>
<view class='thumpnum'>{{item.like}}</view>
</view>
</view>
</view>
</view>
</block>
</view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
js:
Page({
/**
* 页面的初始数据
*/
data: {
list: [{
id: 174,
userid: 10,
title: "日本岚山、和服一日游",
banner: "https://hbimg.huabanimg.com/1ff95bdf3070e1fbff052a03ed353b409749f5ea16a809-WXy25b_fw658",
points: 6,
like: "62",
userinfo: {
id: 10,
nickName: "李诗源",
avatarurl: "https://pic3.zhimg.com/80/v2-fd0a58741fdf20f256c755719f81871e_hd.jpg"
},
islike: 0
},
{
id: 173,
userid: 9,
title: "日本阿寒湖一日游",
banner: "https://hbimg.huabanimg.com/ee5bf07b84fead3d57b445d2e7fa8eb6afe827c617e9c-ha1fZH_fw658",
points: 7,
like: "92",
userinfo: {
id: 9,
nickName: "大飞狼",
avatarurl: "https://pic3.zhimg.com/80/v2-fd0a58741fdf20f256c755719f81871e_hd.jpg"
},
islike: 0
},
{
id: 172,
userid: 8,
title: "二次璧大乱斗东京动漫游",
banner: "http://img1qn.moko.cc/2019-08-12/235e9bab-046e-4fea-afc2-4a049d81774e.jpg?imageView2/2/w/915/h/915/q/85",
points: 4,
like: "41",
userinfo: {
id: 8,
nickName: "黄飞鸿",
avatarurl: "https://pic3.zhimg.com/80/v2-fd0a58741fdf20f256c755719f81871e_hd.jpg"
},
islike: 0
},
{
id: 100,
userid: 314,
title: "心和身体总要有一个在路上🏃",
banner: "http://img.mb.moko.cc/2019-05-18/285bd040-2e62-4e1b-b0e8-91351c1f3c67.jpg?imageView2/2/w/915/h/915",
points: 5,
like: "110",
userinfo: {
id: 314,
nickName: "二夏",
avatarurl: "https://pic3.zhimg.com/80/v2-fd0a58741fdf20f256c755719f81871e_hd.jpg"
},
islike: 0
},
{
id: 99,
userid: 312,
title: "新疆两日游",
banner: "http://img.mb.moko.cc/2019-04-26/d4f1905c-3952-42be-9214-72260b97b0be.jpg?imageView2/2/w/915/h/915",
points: 5,
like: "99",
userinfo: {
id: 312,
nickName: "Tohsaka",
avatarurl: "https://pic3.zhimg.com/80/v2-fd0a58741fdf20f256c755719f81871e_hd.jpg"
},
islike: 0
}
]
},
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
wxss:
.footlist {
position: relative;
border-top-left-radius: 10rpx;
border-top-right-radius: 10rpx;
padding-top: 20rpx;
}
.footlist::after {
content: '';
clear: both;
display: block;
}
.foot-left {
float: left;
width: 50%;
}
.foot-right {
float: left;
width: 50%;
}
.footbox {
width: 100%;
margin: 0 auto;
background: #fff;
box-sizing: border-box;
position: relative;
padding: 24rpx;
padding-top: 10rpx;
}
.box-shadow {
padding: 6rpx 10rpx 18rpx 10rpx;
box-sizing: border-box;
box-shadow: 0 2rpx 2rpx rgba(88, 88, 88, 0.233);
border-bottom-left-radius: 10rpx;
border-bottom-right-radius: 10rpx;
}
.footbox {
width: 100%;
margin: 0 auto;
background: #fff;
box-sizing: border-box;
position: relative;
padding: 24rpx;
padding-top: 10rpx;
}
.footbox image {
width: 100%;
border-top-left-radius: 10rpx;
border-top-right-radius: 10rpx;
}
.footbox .thump {
display: flex;
justify-content: space-between;
width: auto;
height: 42rpx;
}
.footbox .thump image {
width: 40rpx;
height: 42rpx;
float: right;
}
.footbox .bot {
display: flex;
justify-content: space-between;
width: 100%;
padding-top: 10rpx;
}
.footbox .bot::after {
display: block;
content: "";
clear: both;
}
.footbox .bot .t1 {
font-size: 30rpx;
color: #1f1607;
line-height: 1.5;
/* margin-left: 38rpx; */
overflow: hidden;
width: 100%;
margin-top: 15rpx;
}
.footbox .bot .t2 {
font-size: 28rpx;
color: #000;
line-height: 100rpx;
margin-left: 30rpx;
float: left;
}
.foot-left .footbox {
padding-right: 12rpx;
}
.personbox image {
width: 42rpx;
height: 42rpx;
border-radius: 50%;
background: #edaf39;
float: left;
border-top-left-radius: 10rpx;
border-top-right-radius: 10rpx;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115