jquery二級導航內容均分的原理及實現

這個是去年做過的一個項目中的演算法，個人感覺還可以，所以拿出來分享下。

背景：頭部導航二級導航有些內容太長，一列的話太過難看，就要分成兩列，要做到按塊盡量均分，排列順序沒有限制。

原理：

1.把各個二級導航做為一個獨立的，內部分成多個塊，算出各塊的高度，升序排列。

2.求出各塊的總高度和，除2得到平均最高的高度。

3.從塊的高度最高的開始，如果高度大於平均高度，則這塊放入A邊，其他的分至B邊。

4.如果小於這個高度，則平均高度變為減去最高高度的值。

5.取剩下最高的高度與平均高度比，如果高度大於平均高度，則這塊放入A邊，其他的分至B邊。

6.迴圈3-5直到所有塊都結束。

這是這個代碼的主要思路，這樣就把一個導航的內容分成了平均的兩列。

實現：

當只有一個塊時，不用比較
複製代碼 代碼如下:
if (arrs.length <= 1) {
$(obj).css({
width : "150px"
});
return;
}

當總高不高於限高時，沒有必要分成兩列：
複製代碼 代碼如下:
if (sum < limitHeight) {
$(obj).css({
width : "150px"
});
return;
}

原理的實現代碼：
複製代碼 代碼如下:
for (var i = arrs.length - 1; i > -1; i--) {
var _h = $(arrs[i]).height();
if (_h < gap) {
gap = gap - _h;
oldArrs.push(arrs[i]);
} else {
newArrs.push(arrs[i]);
}
}

oldArrs,newArrs代表A,B
demo下載