jqueryセカンダリナビゲーションコンテンツの原理と実装equalization_jquery

これは私が昨年行ったプロジェクトのアルゴリズムで、個人的には非常に優れていると思うので、共有します。

背景: ヘッダー ナビゲーションとセカンダリ ナビゲーションの一部のコンテンツは 1 つの列で読むには長すぎて見苦しいため、2 つの列に分割する必要があります。ブロックごとにできるだけ均等に分割する必要があります。並び順に制限はありません。

原則:

1. 各セカンダリ ナビゲーションを独立したものとして扱い、各ブロックの高さを計算して昇順に並べます。

2. 各ブロックの合計の高さを求め、2 で割って平均最高高さを求めます。

3. 高さの最も高いブロックから始めて、高さが平均の高さより大きい場合、このブロックは A 面に配置され、他のブロックは B 面に割り当てられます。

4. この身長未満の場合、平均身長は最高身長を引いた値となります。

5. 残りの最も高い高さの平均高さに対する比率を計算し、高さが平均高さより大きい場合は、このピースを A 面に置き、残りを B 面に置きます。

6. すべてのブロックが終了するまで 3 ～ 5 をループします。

これがこのコードの主なアイデアであり、ナビゲーションのコンテンツを 2 つの等しい列に分割します。

実装:

ブロックが 1 つだけの場合、比較は必要ありません