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

实现的效果如下图

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

   

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/596105.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

[python]texthero安装后测试代码

测试环境&#xff1a; anaconda3python3.8 texthero1.1.0 测试代码来自官方&#xff1a;https://github.com/jbesomi/texthero 代码&#xff1a; import texthero as hero import pandas as pddf pd.read_csv("https://gitee.com/FIRC/texthero/raw/master/dataset/…

自动化运维管理工具-------------Ansible

目录 一、自动化运维工具有哪些&#xff1f; 1.1Chef 1.2puppet 1.3Saltstack 二、Ansible介绍 2.1Ansible简介 2.2Ansible特点 2.3Ansible工作原理及流程 2.3.1内部流程 2.3.2外部流程 三、Ansible部署 3.1环境准备 3.2管理端安装 ansible 3.3Ansible相关文件 …

Hibernate 元数据模型(MetaModel)提示类没有找到错误

在进行一次编译的时候&#xff0c;提示下面的错误信息&#xff1a; java: java.lang.ClassNotFoundException: org.hibernate.jpamodelgen.JPAMetaModelEntityProcessor 问题和解决 如果你对 Hibernate 的元数据还是不非常了解的话&#xff0c;请参考文章&#xff1a; JPA 的…

保研面试408复习 3——操作系统

文章目录 1、操作系统一、进程有哪几种状态&#xff0c;状态之间的转换、二、调度策略a.处理机调度分为三级&#xff1a;b.调度算法 标记文字记忆&#xff0c;加粗文字注意&#xff0c;普通文字理解。 为什么越写越少&#xff1f; 问就是在打瓦。(bushi) 1、操作系统 一、进程…

深度学习中的不确定性量化:技术、应用和挑战综述(一)

不确定性量化(UQ)在减少优化和决策过程中的不确定性方面起着关键作用&#xff0c;应用于解决各种现实世界的科学和工程应用。贝叶斯近似和集成学习技术是文献中使用最广泛的两种UQ方法。在这方面&#xff0c;研究人员提出了不同的UQ方法&#xff0c;并测试了它们在各种应用中的…

JAVA学习14——异常

目录 异常&#xff1a; 1.异常基本介绍&#xff1a; 2.异常体系图&#xff1a; 3.五大运行时异常&#xff1a; &#xff08;1&#xff09;NullPointerException空指针异常&#xff1a; &#xff08;2&#xff09;AirthmetiException数字运算异常&#xff1a; &#xff0…

翻译《The Old New Thing》 - Thread messages are eaten by modal loops

Raymond Chen 2005年4月26日 模态消息循环吃掉了线程消息 简要 文章提出了一个常见但也容易被忽视的问题&#xff1a; 线程消息&#xff08;由 PostThreadMessage 创建&#xff09;在模态循环中会被 DispatchMessage 丢弃&#xff0c;因为它们没有关联的窗口句柄。建议在创建窗…

2024年好用的几款数据库管理工具

本文主要介绍几款市面上好用的几款支持多种数据库、跨平台的数据库管理工具&#xff0c;包括开源/免费/收费不同的形式。 1. Chat2DB Chat2DB 是一款自2022年9月起开源的AI驱动的数据库管理工具&#xff0c;现如今已经超过了13k的Star。由EasyExcel&#xff08;31K Star&#…

Linux网络编程---Libevent库

一、简介 Libevent库的特点&#xff1a;开源。精简。跨平台&#xff08;Windows、Linux、maxos、unix&#xff09;。专注于网络通信。 二、安装 进入官网下载安装包后拖入虚拟机&#xff0c;压缩包名为 libevent-2.1.11-stable.tar.gz解压&#xff1a;使用命令tar -zxvf libe…

Sy9-dhcp/dns服务配置

前言、 课程需要&#xff08;进入服务器综合配置使用阶段了&#xff09;&#xff0c;这里还是沿用桌面版的ubuntu来配置dhcp和dns&#xff0c;这里updated了新的版本。2024.5 server端环境&#xff1a; Win11VMS&#xff1a;192.168.105.1192.168.105.128 &#xff08;ubuntu…

SEED-X:多模态智能助手

SEED-X&#xff1a;多模态智能助手 SEED-X 是一个多模态智能助手&#xff0c;已经将所有的模型和代码开源了&#xff01;它是一个统一且多用途的多模态基础模型&#xff0c;最新开放了图像编辑模型。 相较于传统的多模态交互框架&#xff0c;SEED-X 具有以下优点&#xff1a;…

OpenHarmony实战开发-如何使用Web组件加载页面

页面加载是Web组件的基本功能。根据页面加载数据来源可以分为三种常用场景&#xff0c;包括加载网络页面、加载本地页面、加载HTML格式的富文本数据。 页面加载过程中&#xff0c;若涉及网络资源获取&#xff0c;需要配置ohos.permission.INTERNET网络访问权限。 加载网络页面…

bugku-mathEnglish

拿到题目得到一串数学题&#xff0c;解出答案得 发现答案全都是1-5的数字&#xff0c;联想到英语中的元音密码解码字典 参照表中字母和前面解出的对应数字&#xff0c;得到flagyuanyinpwd&#xff0c;按格式提交解出题目答案

大模型_基于医疗领域用lora微调ChatDoctor模型

文章目录 ChatDoctor目标方法结果结论收集和准备医患对话数据集创建外部知识数据库具有知识大脑的自主聊天医生的开发模型培训结果数据和模型&#xff1a; 微调推理 ChatDoctor 目标 这项研究的主要目的是通过创建一个在医学建议中具有更高准确性的专业语言模型&#xff0c;来…

创新指南|非凡时代的变革型领导力——五个领导力差异化优势将使高管能够重塑他们的组织

大多数商界领袖现在都明白&#xff0c;我们正在经历一场“伟大的重构”&#xff0c;整个行业、经济和社会都在重塑的时期。然而&#xff0c;考虑到他们面临的短期压力&#xff0c;很少有高管发现自己能够真正应对这些变化&#xff0c;这些变化对他们的组织所需的转型意味着什么…

【Mac】 DSync for mac(文件比较同步工具) v2.7安装教程

软件介绍 DSync是一款文件比较同步工具&#xff0c;通过简便的三步即可完成繁琐的比较、同步操作&#xff0c;您甚至可以通过跳过、删除或反转您选择的文件的复制方向来微调您的同步。这是在Mac上同步文件的最简单方法。 安装教程 1.打开安装包&#xff0c;将「DSync」拖到右…

Merck:mPAGE® Lux SDS-PAGE制胶系统

相对于传统SDS-PAGE制胶工艺&#xff0c;Merck公司的mPAGE Lux制胶系统是一种更快速、简单、安全的替代方法&#xff0c;可实现更具可重现性的结果。mPAGE Lux制胶系统可在90秒内完成小型凝胶固化&#xff0c;而传统方法则需要90分钟以上。该系统采用紫外线照射快速制胶工作流程…

打破 AI 算力天花板,Meta超大规模AI基础设施架构解读

Meta超大规模AI智算基础设施架构设计 摘要 双重 GPU 集群&#xff0c;每群配备 2.4 万个 H100 芯片&#xff0c;分别采用 RoCE 和 InfiniBand 网络连接。LLaMA3 就是在这两个集群上训练出来的&#xff1b;Meta AI 将部署庞大算力集群&#xff0c;拥有 35 万张 H100 GPU&#x…

【字符串】Leetcode 43. 字符串相乘

题目讲解 43. 字符串相乘 算法讲解 class Solution { public:void AddZero(string& temp, int cnt) {while (cnt--) {temp 0;} }string Add(string num1, string num2) {string result;int carry 0;int i num1.size() - 1;int j num2.size() - 1;while (i > 0 ||…

Python学习笔记------处理数据和生成折线图

给定数据&#xff1a; jsonp_1629344292311_69436({"status":0,"msg":"success","data":[{"name":"美国","trend":{"updateDate":["2.22","2.23","2.24",&qu…