Vue3、TypeScript 实现图片数量及大小随宽度自适应调整

前言

过了这么久,想起自己还有个博客,更点内容吧!

来,上需求!

最近在做个前端界面,要求在一行中展示一些图片,展示的图片数量随着窗口宽度大小进行变化,除此之外还有以下要求:

  • 图片要均匀分布;
  • 所有图片要完整的填充一整行;
  • 图片的大小随着窗口宽度变化自适应调整。

不说了,不说了,上个最终实现效果图。

dynamic_show_iamge_in_vue3.gif

实现

基本思路

最开始是打算主要依靠 CSS 的布局来实现,几乎把自己了解的布局方式都想了一遍了,最后默默的给自己找了个借口:刚开始学,不要为难自己!不要为难自己!

motion_1.jpg

最终思路:

  1. 每张图片设定一个最小宽度;
  2. 当JS监测到窗口宽度变化后获取窗口宽度;
  3. 计算在当前窗口宽度,使用最小宽度图片的情况下一行中可以容纳的最多图片数量;
  4. 计算出一行中剩余的空间,然后平均分配给所有图片,得到最终的图片宽度;
  5. 最后通过 CSS 调整图片大小。

代码实现

测试环境:vite + vue3 + ts + sass

<!--* @Author       : KK* @Date         : 2022-02-19 12:30:41* @LastEditTime : 2022-02-19 13:58:02
--><script setup lang="ts">
import { reactive, onMounted, onUnmounted } from 'vue'
// 计算中心 content 的可视宽度 viewpoint-width,content 占据一行的85%宽度
const vw = () => document.body.clientWidth * 0.85; 
const minBoxCnt = 3; // 最少可显示的盒子数量
const maxBoxCnt = 8; // 最多可显示的盒子数量
const boxInfo = reactive({w: 160, // 盒子的宽度mw: 160,  // 盒子的最小宽度ratio: 1.45,// 高宽比gap: 20, // 盒子间的 gap 大小cnt: 3,  // 可显示的盒子数量
})// 计算中心区域可以容纳的盒子数量并设定盒子的宽度
const cal_box_cnt = () => {let c = Math.floor(vw() / boxInfo.mw);c = Math.min(c, maxBoxCnt);const cal_lave_space = (c: number) => {return vw() - boxInfo.mw * c - boxInfo.gap * (c - 1);}let lave_space = 0;let width = 0;if ((lave_space = cal_lave_space(c)) > 0) {width = boxInfo.mw + lave_space / c;} else {c--;width = boxInfo.mw + cal_lave_space(c) / c;}// console.log(lave_space, c, vw());boxInfo.w = width;if (c < minBoxCnt) {boxInfo.w = boxInfo.mw;}// console.log(boxInfo.w);return Math.max(c, minBoxCnt);
}boxInfo.cnt = cal_box_cnt()
onMounted(() => window.onresize = () => boxInfo.cnt = cal_box_cnt());
onUnmounted(() => window.onresize = null);
</script><template><div class="outer"><div class="inner" v-for="item in boxInfo.cnt"><img src="./assets/bg.jpg" alt="background" /></div></div>
</template><style lang="scss">
body {background-color: darkcyan;
}
#app {width: 85%;min-width: 520px; // 160 * 3 + 2 * 20margin: 100px auto;background-color: #fff;
}.outer {display: flex;flex-wrap: nowrap;transition: all 0.5s;.inner {img {width: 100%;height: 100%;}}.inner:nth-child(n) {width: v-bind('boxInfo.w + "px"');height: v-bind('boxInfo.w * boxInfo.ratio + "px"');margin-right: v-bind('boxInfo.gap + "px"');}.inner:last-child {margin-right: 0;}
}
</style>

本文章转自:https://blog.nas-kk.top/?p=449

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

苹果Iphone/Ipad--L2T虚拟教程

1 Iphone和Ipad同为IOS&#xff0c;设置方法相同。首先进入IOS系统的“设置”程序。 2 点击“通用”进入通用设置&#xff0c;点击“”; 3 选择"添加设置 "&#xff1b; 4 选择L2TP方式&#xff0c;填写必要信息&#xff1a;描述、服务器地址 、您注册充值的账号及密…

记忆化搜索的应用

记忆化搜索的应用 一般来说&#xff0c;动态规划总要遍历所有的状态&#xff0c;而搜索可以排除一些无效状态。更重要的是搜索还可以剪枝&#xff0c;可能剪去大量不必要的状态&#xff0c;因此在空间开销上往往比动态规划要低很多。 如何协调好动态规划的高效率与高消费之间的…

Veebot-自动静脉抽血机器人

Veebot-自动静脉抽血机器人 我们可能都有过被抽血的经验。护士让你握紧拳头&#xff0c;用一根橡皮条压住你上臂的血管&#xff0c;在你的肘部内侧寻找你的静脉&#xff0c;有时还需要拍打几下&#xff0c;摸到隆起的静脉血管&#xff0c;一针下去。有时候碰到技术好的护士&…

idea 转普通项目为maven 项目

1、项目上右键 Add Framework Support。 2、选择maven&#xff0c;点击OK。 转载于:https://www.cnblogs.com/mayanze/p/8042489.html

【深度学习之ResNet】——深度残差网络—ResNet总结

目录 论文名称&#xff1a;Deep Residual Learning for Image Recognition 摘要&#xff1a; 1、引言 2、为什么会提出ResNet残差网络呢&#xff1f; 3、深度残差网络结构学习&#xff08;Deep Residual learning&#xff09; &#xff08;1&#xff09;残差单元 &#xf…

关于SafeMove White Paper功能

ABB机器人网站有一个 Safemove 功能的介绍&#xff0c;在Overview页面右半版有一篇文档是 SafeMove White Paper &#xff0c;在45页的 pdf 文档中&#xff0c;详细了介绍工业机器人的安全原则&#xff0c;以及ABB工业机器人自身 EPS (Electronic Position Switches) 和 SafeMo…

面试疑难点解析

List,Set,Map,有什么区别&#xff1f; List和Set实际上市实现了Collection接口&#xff0c;那么Collection接口的原理你能简单描述一下吗&#xff1f; List接口可以插入多个NULL值&#xff0c;并且重复值&#xff0c;而且LIST是一个有序的集合。 Set是一个不可重复的集合&#…

主机无法访问虚拟机的httpd服务

症状&#xff1a;虚拟机装的centos6.3 通过桥接的方式与主机连接 虚拟机通过yum安装httpd服务 在主机浏览器中输入 虚拟机ip 无法访问虚拟机Apache 虚拟机和主机可以相互ping通 解决&#xff1a;关掉虚拟机的防火墙就可以了 命令setup进入防火墙管理 按空格键取消防火墙启用 转…

2017-2018-1 20155229 《信息安全系统设计基础》第十三周学习总结

2017-2018-1 20155229 《信息安全系统设计基础》第十三周学习总结 对“第二章 信息的表示和处理”的深入学习 这周的任务是选一章认为最重要的进行学习&#xff0c;我选择了第二章。当今的计算机存储和处理信息基本上是由二进制&#xff08;位&#xff09;组成&#xff0c;二进…

【VOC格式xml文件解析】——Python

#!/usr/bin/env python # -*- coding: utf-8 -*- # Time : 2021/4/26 12:49 # Author : linlianqin # Site : # File : test1.py # Software: PyCharm # description: import xml.etree.ElementTree as ETdef xmli(xmlpath):xmlTree ET.parse(xmlpath) # 解析xml文…

win7系统的右键菜单只显示一个白色框不显示菜单项 解决办法

如上图所示&#xff0c;桌面或其他大部分地方点击右键菜单&#xff0c;都只显示一个白色框&#xff0c;鼠标移上去才有菜单项看&#xff0c;并且效果很丑 解决办法&#xff1a; 计算机—右键—属性—高级—性能—设置—视觉效果—淡入淡出或滑动菜单到视图&#xff0c;将其前面…

【setup.py编译出错】——提示无法查找到powershell.exe

https://www.cnblogs.com/wind-chaser/p/11359521.html pytorch fasterrcnn训练自己数据集文章链接 在进行faster rcnn pytorch跑通的时候遇到的&#xff0c;我是直接在pycharm中的终端上进行运行的&#xff0c;但是一直会跳出powershell.exe无法查找的错误&#xff0c; pytho…

同工不同酬,年薪 50 万美金的工程师到底有什么神本事?

同工不同酬&#xff0c;年薪 50 万美金的工程师到底有什么神本事&#xff1f;投递人 itwriter 发布于 2014-05-10 23:09 评论(6) 有6066人阅读 原文链接 [收藏] 英文原文&#xff1a;What kind of jobs do the software engineers who earn $500K a year do? 他们究竟是作…

艾里斑大小与像元尺寸的匹配问题

写给自己看的学习记录&#xff1a; 光具有波粒二象性&#xff0c;由此衍生出了几何光学与衍射光学。在光学设计软件中&#xff0c;最常用的判断标准是查看点列图的RMS半径以及MTF图的曲线&#xff0c;这两者分别代表了两种传播性质的评价方式。 在刚接触光学设计时&#xff0…

【mmdetection2.0错误】——ModuleNotFoundError: No module named ‘mmdet‘

一开始以为是安装包导入的相对路径的问题&#xff0c;结果鼓捣了一上午都没有用&#xff0c;最后才发现再进行mmdet2.0环境配置的时候忘记编译了 也就是如下语句&#xff1a; python setup.py develop

ABB RAPID 在 Notepad++ 中语法高亮的实现

ABB RAPID 在 Notepad 中语法高亮的实现 分类&#xff1a; Misc2014-04-08 15:43 145人阅读 评论(0) 收藏 举报notepadNotepad 内置了一个称为 UDL2.0 (User Defined Language) 的引擎&#xff0c;来实现用户自定义语法高亮&#xff0c;使用它&#xff0c;可以定制自己的代码语…

MyEclipse运行时自动保存

今天第一次用MyEclipse&#xff0c;我发现我的代码明明修改了&#xff0c;但运行结果发现总是修改前的代码结果。后来发现&#xff0c;是代码修改后必须保存&#xff0c;再点运行。这个功能明显不合适&#xff0c;所以需要更改MyEclipse的配置。红框是修改后的结果。 转载于:ht…

PLSQL中INDEX BY TABLE 的 prior 和 next 操作学习

开始 --INDEX BY Table SET SERVEROUTPUT ON;DECLARETYPE enm_tab_type IS TABLE OFemp.ename%TYPEINDEX BY BINARY_INTEGER;enm_table enm_tab_type; BEGINenm_table(1):1001;enm_table(2):1002;enm_table(3):1003;enm_table(4):1004;enm_table(6):1006;dbms_output.put_line(…

【深度学习torch——error】——“xxx.pt is a zip archive(did you mean to use torch.jit.load()?)

这个问题是在进行权重文件加载进行预测的时候发生的&#xff0c;原因其实就是torch版本不对 我是用的工作站训练使用的是torch1.7.0&#xff0c;然后用自己的电脑进行预测&#xff0c;就报错了&#xff0c;原因就是自己的电脑是torch1.2.0版本的 因为在1.6版本以上的模型改变…

如何写一个bootloader

声明&#xff1a;本文为学习Codeproject文章的个人总结性文章&#xff0c; 原文&#xff1a;http://www.codeproject.com/Articles/664165/Writing-a-boot-loader-in-Assembly-and-C-Part 本人开发环境&#xff1a; 操作系统&#xff1a;Ubuntu 32位&#xff08;64位的会有push…