jquery二級導(dǎo)航內(nèi)容均分的原理及實現(xiàn)

2019-11-20 22:24:46

字體：大中小

供稿：網(wǎng)友

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

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

原理：

1.把各個二級導(dǎo)航做為一個獨(dú)立的，內(nèi)部分成多個塊，算出各塊的高度，升序排列。

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

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

4.如果小于這個高度，則平均高度變?yōu)闇p去最高高度的值。

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

6.循環(huán)3-5直到所有塊都結(jié)束。

這是這個代碼的主要思路，這樣就把一個導(dǎo)航的內(nèi)容分成了平均的兩列。

實現(xiàn)：

當(dāng)只有一個塊時，不用比較

復(fù)制代碼代碼如下:

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

當(dāng)總高不高于限高時，沒有必要分成兩列：

復(fù)制代碼代碼如下:

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

原理的實現(xiàn)代碼：

復(fù)制代碼代碼如下:

 
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下載

上一篇：js Select下拉列表框進(jìn)行多選、移除、交換內(nèi)容的具體實現(xiàn)方法

下一篇：模擬多級復(fù)選框效果的jquery代碼