Smart fluid 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

这是一个好的方法吗?或者这会不会太慢，因为它可能意味着几百次迭代？

编辑:提供的注释/答案还不能提供一个好的答案，因为可能有一个或多个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来完成繁重的工作。

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

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

li {
    flex: 1;
}

当然，在实践中，您将需要添加浏览器前缀，因此CSS会稍微增大一些。

Flexbox fiddle

Answer 3

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

    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

这是非常粗糙的伪代码，逻辑可能并不完全正确，但它应该比一次添加一个像素快得多。