uniapp/Vue/微信小程序瀑布流,小红书瀑布流,豆瓣瀑布流,淘宝瀑布流布局

效果如下：

1、vue文件

<view class="content"><view class="left"><block wx:for="{{list}}" wx:key="index"><template is="item" data="{{...item}}" wx:if="{{index%2==0}}"></template></block></view><view class="right"><block wx:for="{{list}}" wx:key="index"><template is="item" data="{{...item}}" wx:if="{{index%2==1}}"></template></block></view>
</view>
<template name="item"><view class="item"><image class="item-img" src="{{url}}" mode="widthFix"></image><view class="item-title-box"><navigator url="url" class="item-title">{{title}}</navigator></view><view class="name"><image class="item-ava" src="{{avatar}}"></image><text class="name-title">{{name}}</text><view class="heart"><text>{{num}}</text></view></view></view>
</template>

2、css文件

page {padding: 10rpx;
}
.content {text-align: justify;
}
.item {background-color: #fff;margin: 10rpx 3%;margin-bottom: 20rpx;display: inline-block;width: 96%;border-radius: 20rpx;overflow: hidden;
}
.item-ava {width: 40rpx;height: 40rpx;border-radius: 20rpx;
}
.heart {width: 30rpx;height: 26rpx;margin-right: 8rpx;
}
.heart {display: flex;align-items: center;
}
.item-img {width: 100%
}
.item-title {font-size: 24rpx;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;font-family: 'PingFang SC-Medium';color: #1e1e1e;margin: 15rpx;line-height: 27rpx;
}
.item .name {display: flex;padding: 0 15rpx;margin-top: 20rpx;padding-bottom: 10rpx;align-items: center;font-size: 22rpx;color: #1e1e1e;font-family: 'PingFang SC-Medium';
}
.name image {flex: 0 0 auto;
}
.item-title-box {display: flex;position: relative;
}
.name-title {flex: 1;margin-left: 18rpx;margin-right: 20rpx;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;
}
.name text:last-child {color: #c4c4c4;text-decoration: underline;line-height: 10rpx;
}
.left,
.right {display: inline-block;vertical-align: top;width: 49%;
}

3、js文件

Page({data: {list: [{name: '标题一',num: '1',title: '我是标题一我是标题一我是标题一我是标题一我是标题一我是标题一',url: 'https://kkimgs.yisou.com/ims?kt=url&at=smstruct&key=aHR0cDovL2JqbmV3c3JlYy1jdi53cy4xMjYubmV0L3RocmVlMzU1MjE0NjE5NzVqMDBzeHM5cjIwMDF4ZDIwMHQ4MDBqZGcwMGl0MDBjZy5qcGc=&sign=yx:1DbUpZUdXUXUxLoo_UuidwRHlMw=&tv=400_400',avatar: 'https://kkimgs.yisou.com/ims?kt=url&at=smstruct&key=aHR0cDovL2JqbmV3c3JlYy1jdi53cy4xMjYubmV0L3RocmVlMzU1MjE0NjE5NzVqMDBzeHM5cjIwMDF4ZDIwMHQ4MDBqZGcwMGl0MDBjZy5qcGc=&sign=yx:1DbUpZUdXUXUxLoo_UuidwRHlMw=&tv=400_400'},{name: '我是标题二',num: '1',title: '我是标题二我是标题二我是标题二我是标题二我是标题二我是标题二',url: 'https://kkimgs.yisou.com/ims?kt=url&at=smstruct&key=aHR0cHM6Ly90MS5zaG9wMjY1LmNvbS9zcy8xNjExMTY0Mi96ZTF2NWJjMm1wMGN3NWdiaWk1b3l6LmpwZw==&sign=yx:wfYKruAuOf4iCzAdDizklNM-RaQ=&tv=400_400',avatar: 'https://kkimgs.yisou.com/ims?kt=url&at=smstruct&key=aHR0cHM6Ly90MS5zaG9wMjY1LmNvbS9zcy8xNjExMTY0Mi96ZTF2NWJjMm1wMGN3NWdiaWk1b3l6LmpwZw==&sign=yx:wfYKruAuOf4iCzAdDizklNM-RaQ=&tv=400_400'},{name: '我是标题三',num: '1',title: '我是标题三我是标题三我是标题三我是标题三我是标题三我是标题三',url: 'https://kkimgs.yisou.com/ims?kt=url&at=smstruct&key=aHR0cDovL2ltZy53b2hhb3l1bi5jb20vaW1nL00wMC8wMi9CNC93S2pnMmx2Rm1hbUFaSkFuQUFEUm1YdmRtTnM0MzMuanBn&sign=yx:ysnbE8yOI0Hb_PndHAVaPoJ_HC8=&tv=400_400',avatar: 'https://kkimgs.yisou.com/ims?kt=url&at=smstruct&key=aHR0cDovL2ltZy53b2hhb3l1bi5jb20vaW1nL00wMC8wMi9CNC93S2pnMmx2Rm1hbUFaSkFuQUFEUm1YdmRtTnM0MzMuanBn&sign=yx:ysnbE8yOI0Hb_PndHAVaPoJ_HC8=&tv=400_400'},{name: '我是标题四',num: '1',title: '我是标题四我是标题四我是标题四我是标题四我是标题四我是标题四',url: 'https://kkimgs.yisou.com/ims?kt=url&at=smstruct&key=aHR0cHM6Ly93d3cubXRjeHguY29tL2RvY3VtZW50L2ltYWdlcy8yMDE0MTIxOS8xNjgwMjgxMjEzNjgzOTUyLmpwZw==&sign=yx:jDEBYZFWNDRC4ofg4OcpABaeUrA=&tv=400_400',avatar: 'https://kkimgs.yisou.com/ims?kt=url&at=smstruct&key=aHR0cHM6Ly93d3cubXRjeHguY29tL2RvY3VtZW50L2ltYWdlcy8yMDE0MTIxOS8xNjgwMjgxMjEzNjgzOTUyLmpwZw==&sign=yx:jDEBYZFWNDRC4ofg4OcpABaeUrA=&tv=400_400'},{name: '我是标题五',num: '1',title: '我是标题五我是标题五我是标题五我是标题五我是标题五我是标题五',url: 'https://kkimgs.yisou.com/ims?kt=url&at=smstruct&key=aHR0cDovL3BpYy5xcWJpemhpLmNvbS9hbGxpbWcvMjAyMi8zNy9iZjJkemJmbXNzbGpmbXp2ZDhzdTI1cXcuanBn&sign=yx:9PZZCZGydtTTRi545l-HzThP-U4=&tv=400_400',avatar: 'https://kkimgs.yisou.com/ims?kt=url&at=smstruct&key=aHR0cDovL3BpYy5xcWJpemhpLmNvbS9hbGxpbWcvMjAyMi8zNy9iZjJkemJmbXNzbGpmbXp2ZDhzdTI1cXcuanBn&sign=yx:9PZZCZGydtTTRi545l-HzThP-U4=&tv=400_400'},{name: '我是标题六',num: '1',title: '我是标题六我是标题六我是标题六我是标题六我是标题六我是标题六',url: 'https://kkimgs.yisou.com/ims?kt=url&at=smstruct&key=aHR0cHM6Ly9nZC1oYmltZy5odWFiYW4uY29tLzYxY2UxZGMzNDg4ZTM0ODdiZGYyOWM3MTkzODIyMDliYzhhMmJmOGIxOWI4ZS1WbVhCbGxfZnc2NTg=&sign=yx:s7iz7hteEmedEBlTl8s2dUvgWCQ=&tv=400_400',avatar: 'https://kkimgs.yisou.com/ims?kt=url&at=smstruct&key=aHR0cHM6Ly9nZC1oYmltZy5odWFiYW4uY29tLzYxY2UxZGMzNDg4ZTM0ODdiZGYyOWM3MTkzODIyMDliYzhhMmJmOGIxOWI4ZS1WbVhCbGxfZnc2NTg=&sign=yx:s7iz7hteEmedEBlTl8s2dUvgWCQ=&tv=400_400'},]}
})