[数据结构与算法]给出页面高度，一行展示多张图片，并且图片高度对齐 JavaScript

最新推荐文章于 2021-12-14 16:56:17 发布

DaftJayee

最新推荐文章于 2021-12-14 16:56:17 发布

阅读量456

点赞数

分类专栏： javascript 前端面试题算法

本文链接：https://blog.youkuaiyun.com/qq_43540219/article/details/109232370

版权

javascript 同时被 3 个专栏收录

112 篇文章

订阅专栏

前端面试题

67 篇文章

订阅专栏

算法

39 篇文章

订阅专栏

该博客介绍了一种方法，通过JavaScript在给定页面高度的情况下，确保一行内的多张图片高度对齐。首先统一所有图片为第一张图片的高度，调整宽度保持比例。接着计算调整后图片宽度总和，基于此比例计算最终的图片尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

给出页面高度，一行展示多张图片，并且图片高度对齐

function alignImages(imgs, width){...}
 
alignImages([[1, 1], [1, 1]], 3)  // [[1.5, 1.5], [1.5, 1.5]]
alignImages([[2, 4], [2, 2], [2, 4]], 4)  // [[1, 2], [2, 2], [1, 2]]
                                   
字符图实例：a表示[2, 4](宽为2，高为4的图片)，b表示[2, 2], c表示[2, 4]
aa bb cc
aa bb cc
aa    cc
aa    cc
 
等比例缩放之后：
abbc
abbc

思路：
1.先把所有图片统一高度（我这里是统一成第一张图片的高度），同时按照比例改变图片宽度
2.然后计算经过步骤1改变后的图片宽度总和sum，得出width/sum的比值
3.将宽和高都乘以width/sum的比值，即可得出最终答案
代码：

        function alignImages(imgs, width) {
            let firstHeight = imgs[0][1] // 4
            imgs.map((item, index, arr) => {
                let ratio = firstHeight / item[1] 
                item[0] = item[0] * ratio
                item[1] = firstHeight
            })
            let sum = imgs.reduce((total, cur) => {
                return total + cur[0]
            }, 0);
            let lastRatio = width/sum
            imgs.map((item, index, arr) => {
                item[0] = item[0] * lastRatio
                item[1] = item[1] * lastRatio
            })
            console.log(imgs)
        }
        alignImages([[1, 1],[1, 1]], 3) // [[1.5, 1.5],[1.5, 1.5]]
        alignImages([[2, 4],[2, 2],[2, 4]], 4) // [[1, 2],[2, 2],[1, 2]]