简单实现瀑布流

 view


			
				
				
					ZL933袜子(男女款)5双/袋颜色随机
					3天发货
				
				
					200 积分
				
			
		

js

export default {
		data() {
			return {
				listGoods:[1,1,1,1,1,1,1,1,1,1]
			}
		},
		methods: {
			
		}
	}

css


	.list-view{
		width: 100%;
		background-color: #FFFFFF;
		padding: 20upx;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	.m-view{
		width: 346upx;
		height: 408upx;
		background:rgba(255,255,255,1);
		border-radius:8upx;
		border:1upx solid rgba(216,216,216,1);
		margin-bottom: 20upx;
	}
	.m-view:nth-child(odd){
		margin-right: 20upx;
	}
	.g-img{
		width: 342upx;
		height: 262upx;
		border-radius:8upx 8upx 0upx 0upx;
	}
	
	.m-title{
		padding: 10upx;
		font-size:24upx;
		font-weight:500;
		color:rgba(78,78,78,1);
		line-height:32upx;
	}
	.j-view{
		padding: 10upx;
		font-size:26upx;
		font-weight:500;
		color:rgba(244,72,86,1);
		line-height:36upx;
	}

简单实现瀑布流,架子搭好,里面样式自己可以修改定义

简单实现瀑布流_第1张图片

 

你可能感兴趣的:(瀑布流,css)