2

利用可能な幅 (100%) を使用するために要素をul引き伸ばすメニュー用の JavaScript アルゴリズムを作成しようとしています。li

この流れでアルゴリズムを考えていました。

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

これは良いアプローチですか、それとも数百回の反復を意味する可能性があるため、ラグが多すぎますか?

編集:提供されたコメント/回答は、おそらく1つまたは多くの 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>要素が親要素と同じように伸びないように見えるため、実際にはあまり役に立ちません。

4

3 に答える 3

2

この答えは、フレックスボックスが面倒な作業を行うことに依存しているため、少し進歩的かもしれません。Flexbox は IE10 でサポートされ始めたばかりなので、IE のサポートを無視したくない場合を除き、これらの手法が運用環境で確実に使用できるようになるまでには、さらに 5 年かかる可能性があります。

簡単な解決策は<ul>、行フレックスボックスを作成し、すべての<li>要素を均等にフレックスすることです。

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

li {
    flex: 1;
}

もちろん、実際にはブラウザのプレフィックスを追加する必要があるため、CSS は少し大きくなります。

フレックスボックス フィドル

于 2013-05-17T16:02:07.853 に答える
1

のようなオブジェクトの配列 (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

これは非常に大まかな疑似コードであり、ロジックは正確ではないかもしれませんが、一度に 1 つのピクセルを追加するよりもはるかに高速です。

于 2013-05-17T18:07:04.113 に答える