前言

過了這么久，想起自己還有個博客，更點內容吧！

來，上需求！

最近在做個前端界面，要求在一行中展示一些圖片，展示的圖片數量隨著窗口寬度大小進行變化，除此之外還有以下要求：

• 圖片要均勻分布；
• 所有圖片要完整的填充一整行；
• 圖片的大小隨著窗口寬度變化自適應調整。

不說了，不說了，上個最終實現效果圖。

實現

基本思路

最開始是打算主要依靠 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 实现图片数量及大小随宽度自适应调整的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。