JS 函数 - 数学优化，某些情况下减 1

Question

我对 web 开发仍然一头雾水，不是最擅长数学的，而且当某些东西仍然存在问题时，我很难继续前进。希望大家帮帮忙。

快速：我正在使用 Jquery 使我的 header 中的一些（数量动态）div 重叠 30%，填满容器的整个宽度。我当前的迭代太多次向上舍入，所以我的最后一个元素低于其余元素。

我有 X 个元素填满了 header 容器的整个宽度。每个元素在任一侧重叠 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 添加到运行ning 总变量。任何时候这些变量的总和超过 .5，该特定元素的宽度或边距设置为比默认值高 1。

所以我不再运行了，here's a JSFiddle 有了一切必要的东西，看看我在处理什么。大多数时候运行没问题，但在某些宽度下我会宽 1 个像素。

p.s.

运行 JSFiddle 的工作方式与我的实时沙盒网站 so check that out here 不同。我觉得我包含了所有必要的部分，但我不能肯定地说。在我的 Chrome 上，当 window 大小为 575px（在许多其他宽度中）时，它被搞砸了。

编辑

请注意，我正在更改我的实时网站，但没有更新此 post。不过，我目前还没有删除任何功能，只是对现有功能进行新的 ones/minor 改动。

Answer 1

您有 2 个选择：

计算 pixelMargin 作为下一个整数。喜欢：

var pixelMargin = Math.ceil(circleMargin);

或者您可以在 %.

中使用 pixelMargin

第一个对我有用。

Answer 2

递归！递归是我能想到的最优雅的答案（似乎适用于所有情况）。

遍历我的 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
    });
}

Here's the fiddle with my final result。我确定我还有一些优化要做，但至少它现在可以工作了。

JS 函数 - 数学优化，某些情况下减 1

JS function - Math optimization, off by 1 in some cases

javascript

css

math

jquery

mathematical-optimization