javascript - 抖动子元素的尺寸以填充父元素

Question

假设我有一个宽度为 500 像素的父级 div。它有 13 个应填满其宽度的子元素。

如果我给每个子元素的宽度为 500/13 = 38.46... 像素，浏览器将降低像素值，所以我最终得到 13 个元素，总共占用 38 * 13 = 494 像素。父div右侧会有6个像素没有填充。

是否有一种简单的方法来抖动子元素的宽度，以便将剩余部分(6 像素)分配给一些子元素，从而使总宽度为 500 像素？

如果我必须手动进行计算并且没有办法让浏览器管理它，那又怎样dithering algorithm我可以在这种情况下使用吗？

编辑: 澄清一下——我在客户端使用 JavaScript 进行这些计算。此外，父 div 的大小和子 div 的数量在运行时会发生变化；上图仅为示例。

Answer 1

我建议您自己做所有整数数学运算。然后，您可以计算出不均匀的数量，然后决定如何在元素之间分配它。我的假设是，分布额外像素的最不引人注意的方式是让尽可能多的宽度相似的元素彼此相邻。

这样做的一种方法是计算你有多少个额外的像素 N，然后只给从左边开始的每个 N 个元素一个额外的像素。如果您担心事物不居中，您可以将第一个额外像素分配给最左边的对象，第二个额外像素分配给最右边的对象，第三个额外像素分配给左起第二个，第四个额外像素分配给第二个对，等等...这将在不同宽度的对象之间多一个边界，但比第一个算法更对称。

下面是一些代码，展示了如何从外到内将额外的像素放在末端元素上:

function distributeWidth(len, totalWidth) {
    var results = new Array(len);
    var coreWidth = Math.floor(totalWidth / len);
    var extraWidth = totalWidth - (coreWidth * len);
    var w,s;
    for (var i = 0; i < len; i++) {
        w = coreWidth;
        if (extraWidth > 0) {
            w++;
            extraWidth--;
        }
        if (i % 2 == 0) {
            s = i/2;               // even, index from front of array
        } else {
            s = len - ((i+1)/2);   // odd, index from end of array
        }
        results[s] = w;
    }
    return(results)
}

这里有一个 fiddle 可以看到它的实际效果:http://jsfiddle.net/jfriend00/qpFtT/2/