佛山网站建设4-win方维,wordpress有繁体,做网站培训,友链大全前言
过了这么久#xff0c;想起自己还有个博客#xff0c;更点内容吧#xff01;
来#xff0c;上需求#xff01;
最近在做个前端界面#xff0c;要求在一行中展示一些图片#xff0c;展示的图片数量随着窗口宽度大小进行变化#xff0c;除此之外还有以下要求想起自己还有个博客更点内容吧
来上需求
最近在做个前端界面要求在一行中展示一些图片展示的图片数量随着窗口宽度大小进行变化除此之外还有以下要求
图片要均匀分布所有图片要完整的填充一整行图片的大小随着窗口宽度变化自适应调整。
不说了不说了上个最终实现效果图。 实现
基本思路
最开始是打算主要依靠 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 langts
import { reactive, onMounted, onUnmounted } from vue
// 计算中心 content 的可视宽度 viewpoint-widthcontent 占据一行的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);
/scripttemplatediv classouterdiv classinner v-foritem in boxInfo.cntimg src./assets/bg.jpg altbackground //div/div
/templatestyle langscss
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/?p449
