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

前言

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

来，上需求！

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

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

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

实现

基本思路

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

最终思路：

每张图片设定一个最小宽度；
当JS监测到窗口宽度变化后获取窗口宽度；
计算在当前窗口宽度，使用最小宽度图片的情况下一行中可以容纳的最多图片数量；
计算出一行中剩余的空间，然后平均分配给所有图片，得到最终的图片宽度；
最后通过 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

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

Vite+Vue3+TypeScript
2021年最新最完整Vite+Vue3+TypeScript基础知识案例<一> 1.学习背景随着前端web应用的需求不断发展和变化,vue生态圈也紧跟开发者步伐,不断演化.尽管vue2. ...
Vue3+TypeScript实现网易云音乐WebApp（播放界面：播放、暂停、音量控制、播放进度控制(点击/拖拽进度条)、上一首、下一首）
1. 成果展示真实接口地址本项目使用的是真实线上的网易云API 线上演示地址目前只做了每日推荐(需登录)以及排行榜功能,点个star吧大佬们! 项目GitHub地址 main分支是Vue3+Ty ...
Vite+Vue3+TypeScript基础知识案例
Vite+Vue3+TypeScript基础知识案例<一> 1.学习背景随着前端web应用的需求不断发展和变化,vue生态圈也紧跟开发者步伐,不断演化.尽管vue2.0已经很完善了,很多 ...
vue3+typescript引入外部文件
vue3+typescript中引入外部文件有几种方法 (eg:引入echarts) 第一种方法: 1 indext.html中用script引入 <div id="app" ...
Vue3+TypeScript从入门到进阶（六）——TypeScript知识点——附沿途学习案例及项目实战代码
文章目录一.简介二.Vue2和Vue3区别三.Vue知识点学习四.TypeScript知识点一.JavaScript和TypeScript 二.TypeScript的安装和使用 1.Type ...
条形码宽度大小为什么不能任意调整?是打印机问题还是软件问题？
条形码宽度大小为什么不能任意调整?能调整的都是些固定值,是打印机问题还是软件问题?究其原因,还是要从条形码的构造上来进行说明. 条形码的宽度调整,目前主要凸现在一维条码与介质载体之间的相融度上,所以我 ...
前端vue3+typescript搭建vite项目(初识vite+项目配置完善+屏幕适配)
一.文章引导 #mermaid-svg-1aHB08JglRY7yGzA {font-family:"trebuchet ms",verdana,arial,sans-serif; ...
vue3 + TypeScript + vant +pinia 实现网易云音乐播放器
vue3 + TypeScript + vant +pinia 实现网易云音乐播放器实现功能每日推荐私人FM 歌单广场排行榜歌手歌曲播放 mv播放上下滑动切换云盘上传用户登录歌单创 ...
搭建环境，创建vue3+typescript+vuetify项目
使用场景使用Vue框架创建 vue3+typescript+vuetify3 项目: 一. Node下载安装及配置 1. node官网下载地址: https://nodejs.org/en/ 2. ...

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

前言

实现

基本思路

代码实现

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

最新文章

热门文章