uniapp实现瀑布流基本写法

大概的结构布局是这样呈现的

先由最外层一个div包裹着左右等宽的div，
左边的是index为奇数区，右边是index为偶数区，具体实现就是给每个区域添加

v-if="index%2=1"  或者  v-if="index%2==0"

这样就能让奇数区显示index为奇数的item，
偶数区显示index为偶数的item.
接下来实例是用图片来实现最基本的瀑布流布局
（用到uview组件库的内置样式）

<view class="u-flex u-col-top u-border wrapper">
				<view class= "box1 u-flex u-flex-wrap ">
					<image class="u-border" src="https://picsum.photos/200/300" mode="widthFix"></image>
					<image class="u-border" src="https://picsum.photos/200/200" mode="widthFix"></image>
					<image class="u-border" src="https://picsum.photos/200/300" mode="widthFix"></image>
					<image class="u-border" src="https://picsum.photos/200/400" mode="widthFix"></image>
					<image class="u-border" src="https://picsum.photos/200/500" mode="widthFix"></image>
					<image class="u-border" src="https://picsum.photos/200/600" mode="widthFix"></image>
				</view>
				<view class=" box2 u-flex u-flex-wrap">
					<image class="u-border" src="https://picsum.photos/200/200" mode="widthFix"></image>
					<image class="u-border" src="https://picsum.photos/200/500" mode="widthFix"></image>
					<image class="u-border" src="https://picsum.photos/200/300" mode="widthFix"></image>
					<image class="u-border" src="https://picsum.photos/200/300" mode="widthFix"></image>
					<image class="u-border" src="https://picsum.photos/200/200" mode="widthFix"></image>
					<image class="u-border" src="https://picsum.photos/200/400" mode="widthFix"></image>
				</view>
			</view>

再给左右俩去设置固定的宽度（针对的是等宽不等高的瀑布流）

.box1{
		width: 200px;
	}
	.box2{
		width: 200px;
	}

这样就有一个基本的瀑布流呈现啦