智能流体 javascript 导航助手

Question

我正在尝试为 ul 菜单创建一个 javascript 算法，该菜单延伸 li 元素以使用可用宽度 (100%)。

我正在考虑这种流程的算法：

1. calculate the entire available with
2. substract the total elements width to see what's left
3. iterate the elements and substract 1px from the left width and assign 
   it to the smallest li until the iterator runs out of width

这是一个好方法还是会因为可能意味着几百次迭代而过于滞后？

编辑：提供的 cmets/answers 还没有一个好的答案，因为可能一个或多个 a 元素包含冗长的文本，并且这些不应该得到任何额外的长度。这个问题需要一个算法解决方案，因为每次迭代后只有最小的元素可以占剩余像素，因此菜单被有效地拉伸

更新：对于那些感到困惑的人，这是我希望它伸展的方式：

1. A bank has a total bankroll of 100 dollars
2. Jack has a 40% cut, Dennis has 6%, Minny has 1%
3. The bank starts handing out moneyz, 1 dollar each time starting with the
   poorest kid.
4. In the end Jack has 40% while Dennis and Minny have both 30%

Where the cuts stand for the number of characters in a li's child a node

注意：我已经阅读了一个使用表格显示的纯 css 解决方案，但这确实没有任何好处，因为底层的 <a> 元素似乎不会以这种方式与父元素一起拉伸。

Answer 1

您也可以使用纯 css 而不是 javascript 方法，方法是使用 ul 元素上的 display: table 属性和 li 元素上的 display: table-cell：

看这个小提琴：

http://jsfiddle.net/ERsrf/

如果您想强制li 元素具有相同的宽度，请将此属性添加到ul 元素：

table-layout:fixed;

Answer 2

这个答案可能有点进步，因为它依赖于 flexbox 来完成繁重的工作。 Flexbox is only starting to be supported by IE10，因此这些技术可能还需要 5 年才能在生产环境中可靠地使用，除非您不想忽略对 IE 的支持。

简单的解决方案是使<ul> 成为一个行flexbox，并平等地弯曲所有<li> 元素：

ul {
    display: flex;
    flex-direction: row;
    list-style: none;
    padding: 0;
}

li {
    flex: 1;
}

当然，在实践中你需要添加浏览器前缀，所以 CSS 会变大一点。

Flexbox fiddle

Answer 3

将每个元素添加到对象数组 (var elems) 中，例如 { "width": 0, "number": 0, "LIs": [] }，按宽度对数组进行排序，然后获取您拥有的额外空间量。之后（伪代码如下）：

    if(elems.length > 1) {
        while(extraSpaceLeft > 0) {
            leastWidth = elems object with lowest width;
            secondLeastWidth = elems object with second lowest width;
            toAdd = min(abs(leastWidth - secondLeastWidth),extraSpaceLeft);
            toAdd -= toAdd % leastWidth.number;
            extraSpaceLeft -= toAdd;
            leastWidth += toAdd/leastWidth.number;
            if(leastWidth.width === secondLeastWidth) combine the two objects
            else if(leastWidth.width > secondLeastWidth) swap the two objects in the array
        }
    } else { elems[0].width += extraSpaceLeft; }

    set the element width of each elem based on the elems widths

这确实是粗略的伪代码，逻辑可能不完全对，但应该比一次加一个像素快很多。