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

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

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

原則:

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

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

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

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

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

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

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

実装:

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

コードをコピー コードは次のとおりです:

if (arrs.length $(obj).css({
width : " 150px"
} );
return;
}

合計の高さが高さ制限を超えない場合、2 つの列に分割する必要はありません:

コードをコピー コードは次のとおりです:

if (sum < limitHeight) {
$(obj).css({
width : "150px "
});
return
}

原則の実装コード:

コードをコピー コードは次のとおりです。

for (var i = arrs.length - 1; i > -1; i--) {
var _h = $(arrs[i]).height();
if (_h
ギャップ - _h) ;
oldArrs.push(arrs[i]);
} else {
newArrs.push(arrs[i]);


oldArrs、newArrs は A、B を表します

デモのダウンロード