vue 瀑布流 纯css

一、今天记录一个纯css来实现瀑布流的方法，对的,你没有看错就是纯css,这次借助的是css3的特性，目前才了解到的，有一些还没太懂，希望大家多多指教，好了，废话不多说，直接上代码。

二、html

<div class="flower-content">
					<div class="flower-item" v-for="(item,i) in flower_list" :key="i">
						<div class="flower-item-img">
							<van-image :src="item.imgPotho" />
						</div>
						<div class="flower-item-info">
							<div class="flower-item-info-title"><span>{{item.name}}</span></div>
							<div class="infos">
								<div class="price">￥{{item.price}}</div>
							</div>
							<div class="flower-item-info-name">
								<div class="img">
									<van-image round width="0.625rem" height="0.625rem"
										:src="item.imgPotho" />
								</div>
								<div class="name">{{item.title}}</div>
							</div>
							<div class="amount">
								<div class="reach">{{item.reach1}}人到过</div>
								<div class="reach">{{item.reach2}}人付款</div>
							</div>
						</div>
					</div>
			</div>

三、css

/* 核心代码开始 */
.flower-content {
	width: 94%;
	height: auto;
	margin: 0.3125rem auto;
	padding-bottom: 2rem;
	-moz-column-count: 2;
	/* Firefox */
	-webkit-column-count: 2;
	/* Safari 和 Chrome */
	column-count: 2;/*属性指定某个元素应分为的列数 */
	-moz-column-gap: 1em;
	-webkit-column-gap: 1em;
	column-gap: 1em;/* 属性规定列之间的间隔。 */
}
.flower-item {
	height: auto;
	padding-bottom: 0.3125rem;
	background-color: #fff;
	margin-top: 0.375rem;
	border-radius: 0.15625rem;
	break-inside:avoid;
	overflow: hidden;
}

/* 核心代码结束 */
.flower-item:nth-child(1){
	margin-top: 0;
}

.flower-item-info {
	width: 94%;
	margin: auto;
	font-size: 0.375rem;
	color: #666;
}

.flower-item-info-title {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.flower-item-info-name {
	display: flex;
	margin-top: 0.15625rem;
	align-items: center;
}

.flower-item-info-name .img {
	display: flex;
	align-items: center;
}

.flower-item-info-name .name {
	margin-left: 0.1875rem;
	font-size: 0.34375rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.infos {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 0.1875rem;
}

.infos .price {
	color: red;
	font-size: 0.46875rem;
}

.amount {
	display: flex;
	justify-content: space-between;
	color: #999;
	font-size: 0.3125rem;
	margin-top: 0.1875rem;
}

四、js

		<script type="text/javascript">
		let flower_item = [
			{
				imgPotho:'/weixin/2020/05/03/1588494556916891.jpg',
				name:'高级猫咪富贵猫高级猫咪富贵猫高级猫咪富贵猫高级猫咪富贵猫',
				price:'198.00',
				title:'猫咪生活馆猫咪生活馆猫咪生活馆猫咪生活馆猫咪生活馆猫咪生活馆猫咪生活馆',
				imgDian:'https://img01.yzcdn.cn/vant/cat.jpeg',
				reach1:'5',
				reach2:'52',
			},
			{
				imgPotho:/weixin/2019/09/21/156905146528498.jpg',
				name:'高级猫咪富贵猫高级猫咪富贵猫高级猫咪富贵猫高级猫咪富贵猫',
				price:'198.00',
				title:'猫咪生活馆猫咪生活馆猫咪生活馆猫咪生活馆猫咪生活馆猫咪生活馆猫咪生活馆',
				imgDian:'https://img01.yzcdn.cn/vant/cat.jpeg',
				reach1:'5',
				reach2:'52',
			},
			{
				imgPotho:'/weixin/storegoods/134887/2020/12/10/1607529891613082.jpg',
				name:'高级猫咪富贵猫高级猫咪富贵猫高级猫咪富贵猫高级猫咪富贵猫',
				price:'198.00',
				title:'猫咪生活馆猫咪生活馆猫咪生活馆猫咪生活馆猫咪生活馆猫咪生活馆猫咪生活馆',
				imgDian:'https://img01.yzcdn.cn/vant/cat.jpeg',
				reach1:'5',
				reach2:'52',
			},
			{
				imgPotho:'/weixin/2019/10/15/1571143190134165.jpg',
				name:'高级猫咪富贵猫高级猫咪富贵猫高级猫咪富贵猫高级猫咪富贵猫',
				price:'198.00',
				title:'猫咪生活馆猫咪生活馆猫咪生活馆猫咪生活馆猫咪生活馆猫咪生活馆猫咪生活馆',
				imgDian:'https://img01.yzcdn.cn/vant/cat.jpeg',
				reach1:'5',
				reach2:'52',
			},
		]
			new Vue({
				el: '#flower',
				data() {
					return {
						flower_list:flower_item
					}
				},
				mounted() {},
				methods: {
					onSearch(val) {
						this.$toast(val);
					},
					onCancel() {
						this.$toast('取消');
					},

				}
			})
		</script>

五、这代码现在唯一的缺点就是它是上下来排列的（比如我代码里面总共是四条数据，一行显示两个，那就是左1，左2，右3，右4） ，而不是从左到右来实现的，希望有大佬提点一下，因为我也不太熟这个布局

六、我这因为是静态的 所以看不到瀑布流的那种效果，但是你加上上拉加载，或者懒加载，你就能看到效果了，先上一张效果图