首頁 > web前端 > js教程 > jquery二級導航內容均分的原理及實現_jquery

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

WBOY
發布: 2016-05-16 17:25:37
原創
1222 人瀏覽過

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

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

原理:

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

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

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

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

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

6.循環3-5直到所有區塊都結束。

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

實現:

當只有一個塊時,不用比較

複製代碼 程式碼如下:

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

總高不高於限高時,沒有必要分成兩列:
複製程式碼 程式碼如下:

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

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

oldArrs,​​newArrs代表A,B

demo下載
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板