JS函数 - 数学优化，在某些情况下关闭1

我仍然在网络开发人员的耳朵后面，而不是数学上最好的，并且在某些事情仍然中断时仍然存在问题。希望你们能帮忙。JS函数 - 数学优化，在某些情况下关闭1

快速：我正在使用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来运行总变量。任何时候，这些变量中的任何一个的总和超过.5，该特定元素的宽度或边距设置1都高于默认值。

因此，我不再运行，here's a JSFiddle与所有必要的东西，看看我正在处理。它大部分时间运行良好，但在一定的宽度上，我的像素太宽了。

p.s.

冉JSFiddle，没有像我的生活沙盒网站so check that out here一样的方式工作。我觉得我包括了所有必要的部分，但我不能肯定地说。在我的Chrome浏览器中，当窗口大小为575像素（在许多其他宽度之间）时，它会变得混乱。

编辑

应当指出的是，我正在改变我的生活网站，而更新这个帖子。我并没有删除任何功能，只是对现有的功能进行了新的修改。

来源

2017-08-09 Nicholas

你的活的网站看起来像一条线给我 - 小提琴坏了 –

@JaromandaX我正在谈论活的网站的标题部分，与圆圈。望着小提琴... - 编辑是的，我设置CSS来显示一个破碎的大小位的例子。如果将头部圆形的CSS更改为576像素宽度并再次运行，则圆圈可以很好地修复。 – Nicholas

正如我所说，活的网站看起来不错，不像小提琴 –

递归！递归是最优雅的答案（它似乎适用于所有情况）我可以想出来。

一次遍历我的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。我确信我仍然有一些优化工作要做，但至少现在它正在工作。

来源

2017-08-09 05:25:18 Nicholas

你有两个选择：

计算pixelMargin为下一个整数。如：

var pixelMargin = Math.ceil(circleMargin);

或者您可以使用％pixelMargin。

第一个为我工作。

来源

2017-08-09 01:59:19 MKR

JS函数 - 数学优化，在某些情况下关闭1

回答

相关问题