JS函数 - 数学优化，在某些情况下存在偏差问题

Question

我对Web开发还很生疏，数学不是很好，遇到问题时很难继续前进。希望你们能帮助我。

简单来说：我正在使用Jquery制作一些（数量动态）div，使它们在我的页眉中重叠30％，填满整个容器的宽度。我的当前迭代次数多了一个，因此我的最后一个元素在其余元素下面。

我有X个元素填满了我的页眉容器的整个宽度。每个元素两侧重叠30％。用公式计算数学不是问题。但使用这些数字确保像素精度却更加困难。以下是我用来确定每个元素宽度的内容。

width of element = [container width] / ((.7 * ([# of elements] - 1)) + 1)
left margin of element = [width of element] * .3

我创建了名为extraWidth和extraMargin的变量，分别是宽度和边距%1。现在我使用的默认元素宽度是width-(width%1)。对于每个元素，我将extraWidth和extraMargin添加到运行总变量中。每当这些变量中的任何一个的总和超过0.5时，该特定元素的宽度或边距就会比默认值高1。

为了不再冗长，这里有一个JSFiddle，其中包含了查看我正在处理的所有必要内容。它大多数时间都可以正常运行，但在某些宽度上会多出1个像素。

p.s.

运行了JSFiddle，发现它与我的实际沙盒站点的工作方式不同，因此请在这里检查。我觉得我已经包含了所有必要的部分，但我不能确定。在我的Chrome浏览器上，当窗口大小为575px（以及许多其他宽度）时，它会出现问题。

编辑

应该注意的是，我正在对我的实际网站进行更改，而没有更新此帖子。不过，我暂时不会删除任何功能，只是创建新的函数/对现有函数进行轻微修改。

- Nicholas

---

你的实时网站对我来说看起来像是一行代码 - 但是 fiddle 已经坏了 - Jaromanda X

@JaromandaX，我在说的是网站实时页面的头部部分，有圆圈的那一部分。我正在查看这个示例... -- 编辑：是的，我将CSS设置为显示一个破损尺寸的示例。如果你将head-Circles的CSS更改为576像素宽度并重新运行，圆圈就会正确修复。 - Nicholas

我完全觉得我应该一直使用百分比……所以我现在就去尝试一下。 - Nicholas

我认为circleMargin的调整有问题。四舍五入应该采用另一种方式，即向上取整。 - MKR

FYI：供以后参考 - 请查看 https://jsfiddle.net/rccdonau/ - 水平调整输出面板 - 不需要 JS :p - Jaromanda X

Answer 1

递归！递归是我能想到的最优雅的答案（在所有情况下似乎都有效）。

通过逐个迭代我的 jQuery 对象中的元素，并根据剩余容器宽度而不是整个容器宽度计算宽度和边距，使计算变得更加容易。

function circleWidth(circles, containerWidth) {
    var width = containerWidth / ((.7 * (circles.length - 1)) + 1);
    var pxWidth = Math.round(width);
    var margin = width * .3;
    var pxMargin = Math.round(margin);

    $(circles[0]).css({
        'width': pxWidth + "px",
        'margin-left': "-" + pxMargin + "px"
    });

    containerWidth -= (pxWidth - pxMargin);

    if (circles.length > 1) {
        circleWidth(circles.slice(1), containerWidth);
    }
}

function circleSize(circles, containerWidth) {
    var height = Math.ceil(containerWidth / ((.7 * (circles.length - 1)) + 1));

    circles.each(function() {
        $(this).css({
            'height': height + "px"
        });
    });

    circleWidth(circles, containerWidth);

    $(circles[circles.length]).css({
        'margin-left': $(circles[0]).css('margin-left')
    });

    $(circles[0]).css({
        'margin-left': 0
    });
}

这里是我的最终结果的演示。我相信我还有一些优化工作要做，但至少现在它可以工作了。

- Nicholas

Answer 2

你有两个选择：

将pixelMargin计算为下一个整数，例如：

var pixelMargin = Math.ceil(circleMargin);

或者你可以使用pixelMargin以百分比的形式。

第一个对我有用。

- MKR