分享一次图片流布局

先看效果图:

这里肯定有很多同学会通过网上其他博主使用的CSS的 column-count:3  来解决流布局,但是在小程序里面用这个CSS样式页面在通过上拉加载更多数据的时候页面会抽风的闪烁一下,甚至有时候图片还显示不出来,我查了一下,这是谷歌留的一个BUG,其他博主已遇到相同类似的问题:https://segmentfault.com/q/1010000008812226 参考这篇文章

先想一下流布局如何实现的呢?
我的方案是分成三份

后台拿到数据,分割三个数组,分别对这三个数组就行渲染
全部代码:

<template>
	<view>
		<customNavgationBar title="精选"></customNavgationBar>
		<view>
			<view class="bg-color">
				<view class="search row">
					<view style="flex: 2;background-color: rgba(255,255,255,0.2);padding: 0 30rpx;">
						<input type="text" v-model="keyword" placeholder="输入要搜索的关键词"
							style="color: #ffffff;line-height: 76rpx;height: 76rpx;font-size: 30rpx;"
							placeholder-style="font-size:25rpx;color:#fff">
					</view>
					<view style="flex: 0.5;background-color: #1CA086;">
						<button @click="submit">搜索</button>
					</view>
				</view>
				<view class="row" style="font-size: 28rpx;margin: 20rpx auto;">
					<view style="vertical-align: middle;display: inline-block;color: #fff;">
						热门搜索：
						<text v-for="(item) in hot" @click="hotClick(item)"
							style="background: rgba(255,255,255,0.2);border-radius: 50rpx;padding: 7rpx 15rpx;margin-right: 15rpx;font-size: 20rpx;">{{item}}</text>
					</view>
				</view>
			</view>
			<view class="photo">
				<view>
					<view v-for="(item,index) in arrList[0]" :key="index" class="items">
						<image :src="item.url" mode="widthFix" @click="preview(item.url)" lazy-load="true"></image>
					</view>
				</view>
				<view>
					<view v-for="(item,index) in arrList[1]" :key="index" class="items">
						<image :src="item.url" mode="widthFix" @click="preview(item.url)" lazy-load="true"></image>
					</view>
				</view>
				<view>
					<view v-for="(item,index) in arrList[2]" :key="index" class="items">
						<image :src="item.url" mode="widthFix" @click="preview(item.url)" lazy-load="true"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arr: [],
				arrList: [
					[],
					[],
					[]
				],
				keyword: '',
				pages: 0,
				hot: ['手机壁纸', '头像', ' 高清美图', '手抄报'],

			}
		},
		onLoad() {
			this.request()
		},
		onPullDownRefresh() {
			uni.showNavigationBarLoading(); //在标题栏中显示加载
			this.submit();
		},
		onReachBottom() {
			this.request();
		},
		onShareAppMessage: function() {},
		onShareTimeline: function() {},
		methods: {
			submit() {
				let t = this;
				t.arr = [];
				t.arrList = [
					[],
					[],
					[]
				]
				t.request()
			},
			hotClick(text) {
				this.keyword = text;
				this.submit()
			},
			request() {
				let t = this;
				t.pages = t.pages + 1;
				let arr = t.arr;
				let num = 0;
				let arrList = t.arrList;
				let keyword = t.keyword
				if (keyword == '') {
					keyword = '手机壁纸';
				}
				// let num = 1;
				t.$request('apis_images', {
					keyword: keyword,
					pages: t.pages,
					limit: 30
				}, '', '加载中...').then(res => {

					let data = res.data.data;
					for (let c = 0; c < data.length; c++) {
						arr.push(data[c]);
						if (num == 1) {
							arrList[1].push(data[c]);
							num = 2;
						} else if (num == 2) {
							arrList[2].push(data[c]);
							num = 0;
						} else {
							arrList[0].push(data[c]);
							num = 1;
						}
					}
					t.arrList = arrList;
					uni.hideNavigationBarLoading();
					uni.stopPullDownRefresh();
					t.arr = arr;

				})
			},

			preview(url) {
				let images = this.arr;
				let imgsArray = [];
				for (let i = 0; i < images.length; i++) {
					imgsArray.push(images[i].url);
				}
				uni.previewImage({
					current: url,
					urls: imgsArray,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片'],
					}
				});
			},


		}
	}
</script>

<style>
	page {
		padding-bottom: 50rpx;
	}

	.bg-color {
		width: 100%;
		background-image: linear-gradient(to right, #1BD0AD, #1BD0AD);
		overflow: hidden;
		position: relative;
		padding-bottom: 20rpx;
		padding-top: 30rpx;
	}

	.search {
		display: flex;
	}

	.photo {
		display: flex;
		margin-top: 12rpx;
		padding: 10rpx 10rpx 10rpx 15rpx;
	}

	.photo>view {
		flex: 1;
		padding: 10rpx;
	}

	.items {

		/* padding: 10rpx; */
	}

	.items>image {
		width: 100%;
		border-radius: 10rpx;
	}
</style>