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

ゞ浴缸里的玫瑰 2022-12-17 08:39 18阅读 0赞

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

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]]