css js 实现图片四张的时候两张一行三张、五张的时候三张一行

2401_84868241

于 2024-05-08 11:25:20 发布

阅读量179

点赞数 2

分类专栏： css js 文章标签： css javascript windows

本文链接：https://blog.csdn.net/2401_84868241/article/details/138565064

版权

js 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

1、html

<view v-if="item.photo_list && item.photo_list.length !== 0" 
    :class="getImageClass(item.photo_list.length)">
	<view v-for="(j,ind) in item.photo_list" :key="'photo'+ind" class="image-wrapper">
	   <img :src="j" alt="" srcset="" @click="ClickImage(item.photo_list,j)" />
	</view>
</view>

2、js

// 图片布局
getImageClass(total){
	if (total === 4 ) {
		return 'images';  
	} 
	return 'image'; 
},

3、css

	.image {
		display: flex;
		flex-wrap: wrap;	
		align-items: flex-start;
	}
	.image .image-wrapper {
		margin: 5px; 
		width: calc(33% - 10px);
	}
	.images{
		display: flex;
		flex-wrap: wrap;	
		align-items: flex-start;
		width: 70%;
	}
	.images .image-wrapper{
		margin: 5px; 
		width: calc(50% - 10px);
	}
    .image-wrapper img {
		width: 100%;
		padding: 0;
		margin: 0;
		height: 206rpx;
		object-fit: cover;
	}