這個是去年做過的一個項目中的算法,個人感覺還可以,所以拿出來分享下。
背景:頭部導航二級導航有些內容太長,一列的話太過難看,就要分成兩列,要做到按塊盡量均分,排列順序沒有限制。
原理:
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]);
}
}
新聞熱點
疑難解答
圖片精選