微信小程序实现瀑布流
效果图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/6d8e9db9187ff4b4358ac5c3397d0a4d.png#pic_center)
.wxml
<view class="content">
<view class="content-left">
<block wx:for="{{list}}" wx:key="list">
<template is='item-data' data='{{...item}}' wx:if="{{index % 2 ==0}}"></template>
</block>
</view>
<view class="content-right">
<block wx:for="{{list}}" wx:key="list">
<template is='item-data' data='{{...item}}' wx:if="{{index % 2 ==1}}"></template>
</block>
</view>
</view>
<template name="item-data">
<view class="content-item">
<image src="{{url}}" class="content-item-img" mode="widthFix" />
<view class="content-item-box">
<view class="content-item-title">{{title}}</view>
<view class="content-item-name">
<view class="flex-row">
<image src="{{avatar}}" mode="aspectFill" class="content-item-avatar" />
<view>{{name}}</view>
</view>
<view class="content-item-heart">{{num}}</view>
</view>
</view>
</view>
</template>
.wxss
page {
padding: 10rpx;
box-sizing: border-box;
}
.content {
display: flex;
justify-content: space-between;
}
.content-left, .content-right {
width: 49%;
}
.content-item {
margin: 10rpx auto 20rpx;
background: #fff;
width: 98%;
border-radius: 20rpx;
overflow: hidden;
}
.content-item-img {
width: 100%;
}
.flex-row {
display: flex;
flex-direction: row;
align-items: center;
}
.content-item-box {
font-size: 24rpx;
color: #333;
padding: 20rpx;
box-sizing: border-box;
}
.content-item-title {
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
.content-item-name {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 20rpx;
font-size: 22rpx;
}
.content-item-avatar {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
margin-right: 15rpx;
}
.content-item-heart {
color: #c4c4c4;
text-decoration: underline;
font-size: 26rpx;
}
.js
Page({
data: {
list:[
{
"name":"萌系小小妞1",
"num":"8",
"title":"正是地方撒是地方各级撒谎",
"url":"https://w.wallhaven.cc/full/zy/wallhaven-zyz6xw.png",
"avatar":"https://w.wallhaven.cc/full/zy/wallhaven-zyz6xw.png"
},
{
"name":"萌系小小妞2",
"num":"18",
"title":"正是地方撒是地方各级撒谎",
"url":"https://w.wallhaven.cc/full/gp/wallhaven-gpjj9q.jpg",
"avatar":"https://w.wallhaven.cc/full/gp/wallhaven-gpjj9q.jpg"
},
{
"name":"萌系小小妞3",
"num":"21",
"title":"正是地方撒是地方各级撒谎",
"url":"https://w.wallhaven.cc/full/1p/wallhaven-1p1qgv.jpg",
"avatar":"https://w.wallhaven.cc/full/1p/wallhaven-1p1qgv.jpg"
},
{
"name":"萌系小小妞4",
"num":"33",
"title":"正是地方撒是地方各级撒谎",
"url":"https://w.wallhaven.cc/full/kx/wallhaven-kxz9km.png",
"avatar":"https://w.wallhaven.cc/full/kx/wallhaven-kxz9km.png"
},
{
"name":"萌系小小妞5",
"num":"99+",
"title":"正是地方撒是地方各级撒谎",
"url":"https://w.wallhaven.cc/full/m3/wallhaven-m3d119.jpg",
"avatar":"https://w.wallhaven.cc/full/m3/wallhaven-m3d119.jpg"
},
{
"name":"萌系小小妞6",
"num":"66",
"title":"正是地方撒是地方各级撒谎",
"url":"https://w.wallhaven.cc/full/zy/wallhaven-zyz6xw.png",
"avatar":"https://w.wallhaven.cc/full/zy/wallhaven-zyz6xw.png"
},
{
"name":"萌系小小妞7",
"num":"23",
"title":"正是地方撒是地方各级撒谎",
"url":"https://w.wallhaven.cc/full/7p/wallhaven-7p961o.jpg",
"avatar":"https://w.wallhaven.cc/full/7p/wallhaven-7p961o.jpg"
},
{
"name":"萌系小小妞8",
"num":"4",
"title":"正是地方撒是地方各级撒谎",
"url":"https://w.wallhaven.cc/full/9d/wallhaven-9dzd5k.jpg",
"avatar":"https://w.wallhaven.cc/full/9d/wallhaven-9dzd5k.jpg"
},
{
"name":"萌系小小妞9",
"num":"89",
"title":"正是地方撒是地方各级撒谎",
"url":"https://w.wallhaven.cc/full/5g/wallhaven-5g7ew7.jpg",
"avatar":"https://w.wallhaven.cc/full/5g/wallhaven-5g7ew7.jpg"
},
{
"name":"萌系小小妞10",
"num":"64",
"title":"正是地方撒是地方各级撒谎",
"url":"https://w.wallhaven.cc/full/rr/wallhaven-rrg7j7.png",
"avatar":"https://w.wallhaven.cc/full/rr/wallhaven-rrg7j7.png"
},
{
"name":"萌系小小妞11",
"num":"23",
"title":"正是地方撒是地方各级撒谎",
"url":"https://w.wallhaven.cc/full/l8/wallhaven-l8zrqr.png",
"avatar":"https://w.wallhaven.cc/full/l8/wallhaven-l8zrqr.png"
},
{
"name":"萌系小小妞12",
"num":"10",
"title":"正是地方撒是地方各级撒谎",
"url":"https://w.wallhaven.cc/full/kx/wallhaven-kxzxo1.jpg",
"avatar":"https://w.wallhaven.cc/full/kx/wallhaven-kxzxo1.jpg"
},
{
"name":"萌系小小妞13",
"num":"38",
"title":"正是地方撒是地方各级撒谎",
"url":"https://w.wallhaven.cc/full/m3/wallhaven-m3z1j8.jpg",
"avatar":"https://w.wallhaven.cc/full/m3/wallhaven-m3z1j8.jpg"
},
{
"name":"萌系小小妞14",
"num":"35",
"title":"正是地方撒是地方各级撒谎",
"url":"https://w.wallhaven.cc/full/6d/wallhaven-6dm5xx.jpg",
"avatar":"https://w.wallhaven.cc/full/6d/wallhaven-6dm5xx.jpg"
},
{
"name":"萌系小小妞15",
"num":"23",
"title":"正是地方撒是地方各级撒谎",
"url":"https://w.wallhaven.cc/full/kx/wallhaven-kxzlgm.jpg",
"avatar":"https://w.wallhaven.cc/full/kx/wallhaven-kxzlgm.jpg"
},
{
"name":"萌系小小妞16",
"num":"21",
"title":"正是地方撒是地方各级撒谎",
"url":"https://w.wallhaven.cc/full/d6/wallhaven-d63xgl.jpg",
"avatar":"https://w.wallhaven.cc/full/d6/wallhaven-d63xgl.jpg"
},
{
"name":"萌系小小妞17",
"num":"11",
"title":"正是地方撒是地方各级撒谎",
"url":"https://w.wallhaven.cc/full/kx/wallhaven-kxz6dd.jpg",
"avatar":"https://w.wallhaven.cc/full/kx/wallhaven-kxz6dd.jpg"
},
{
"name":"萌系小小妞18",
"num":"7",
"title":"正是地方撒是地方各级撒谎",
"url":"https://w.wallhaven.cc/full/we/wallhaven-we1xx7.jpg",
"avatar":"https://w.wallhaven.cc/full/we/wallhaven-we1xx7.jpg"
},
{
"name":"萌系小小妞19",
"num":"6",
"title":"正是地方撒是地方各级撒谎",
"url":"https://w.wallhaven.cc/full/7p/wallhaven-7pjy2e.jpg",
"avatar":"https://w.wallhaven.cc/full/7p/wallhaven-7pjy2e.jpg"
},
{
"name":"萌系小小妞20",
"num":"5",
"title":"正是地方撒是地方各级撒谎",
"url":"https://w.wallhaven.cc/full/3l/wallhaven-3l3ed3.jpg",
"avatar":"https://w.wallhaven.cc/full/3l/wallhaven-3l3ed3.jpg"
}
]
}