图片四张的时候两个一排图片三张五张的时候三个一排 css 如何实现

原创于 2024-05-06 17:22:42 发布 · 539 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #javascript

css 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在HTML、JavaScript和CSS中使用Vue.js实现图片列表的动态显示，通过getImageClass函数根据图片数量调整布局，包括单列和双列模式，并使用CSS的flexbox进行自适应布局和对象填充.

部署运行你感兴趣的模型镜像

实现的效果如下图

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;
	}

您可能感兴趣的与本文相关的镜像

AutoGPT

AI应用

AutoGPT于2023年3月30日由游戏公司Significant Gravitas Ltd.的创始人Toran Bruce Richards发布,AutoGPT是一个AI agent（智能体），也是开源的应用程序，结合了GPT-4和GPT-3.5技术，给定自然语言的目标，它将尝试通过将其分解成子任务，并在自动循环中使用互联网和其他工具来实现这一目标