代码之家 › 专栏 › 技术社区 › mkoryak

将相对宽度列表转换为像素宽度

javascript

mkoryak · 技术社区 · 14 年前

我有以下问题:

给定一个相对宽度列表(没有任何单位,只是彼此相对),生成一个像素宽度列表,以便这些像素宽度与原始列表具有相同的比例。

:比例列表,总像素宽度。

输出 :像素宽度的列表,其中每个宽度是一个int,这些宽度的总和等于总宽度。

代码:

var sizes = "1,2,3,5,7,10".split(","); //initial proportions
var totalWidth = 1024; // total pixel width

var sizesTotal = 0;
for (var i = 0; i < sizes.length; i++) {
 sizesTotal += parseInt(sizes[i], 10);
}

if(sizesTotal != 100){
 var totalLeft = 100;;
 for (var i = 0; i < sizes.length; i++) {
  sizes[i] = Math.floor(parseInt(sizes[i], 10) / sizesTotal * 100);
  totalLeft -= sizes[i];
 }
 sizes[sizes.lengh - 1] = totalLeft;
}

totalLeft = totalWidth;
for (var i = 0; i < sizes.length; i++) {
 widths[i] = Math.floor(totalWidth / 100 * sizes[i]) 
 totalLeft -= widths[i];
}
widths[sizes.lenght - 1] = totalLeft;

//return widths which contains a list of INT pixel sizes

2 回复 | 直到 6 年前

James 14 年前

也许值得把它抽象成一个函数。。。我把它清理了一下。我也不知道那是怎么回事 sizesTotal != 100...

function pixelWidths(proportions, totalPx) {

    var pLen = proportions.length,
        pTotal = 0,
        ratio, i;

    for ( i = -1; ++i < pLen; )
        pTotal += proportions[i];

    ratio = totalPx / pTotal;
    pTotal = 0;

    for ( i = -1; ++i < pLen; )
        pTotal += proportions[i] = ~~(proportions[i] * ratio);

    proportions[pLen-1] += totalPx - pTotal;

    return proportions;

}

pixelWidths([1,2,3,5,7,10], 1024); // => [36, 73, 109, 182, 256, 368]

仅供参考, ~~ toInt32 操作),然后铺设地板。例如:

~~'2'; // => 2
~~'2.333'; // => 2
~~null; // => 0

Pointy 14 年前

如果 sizes parseInt() ?
在哪里 widths 宣布?
这如何解释舍入问题?哦,我明白了;这是最后一行;你不需要补充吗 totalLeft 而不只是覆盖那里的东西?

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前

SlickRed · 我无法使用JS关注HTML元素

1 年前

Mayron Guedes · 如果登录名不在本地存储中,如何重定向页面?

1 年前

assembler · Nextjs没有处理发布请求

1 年前

PavelB · 如何使用Seleniumwebdriver和mocha只运行一个测试文件?

1 年前

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Toniq · javascript为php保存多维数组

1 年前

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

SkyWalker · 在JavaScript中,合并日期-时间序列的有效算法是什么?

1 年前