快捷導(dǎo)航

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

更新時(shí)間：2013年08月13日 16:33:36 作者：

頭部導(dǎo)航二級(jí)導(dǎo)航有些內(nèi)容太長(zhǎng)，一列的話太過(guò)難看，就要分成兩列，要做到按塊盡量均分，排列順序沒(méi)有限制

這個(gè)是去年做過(guò)的一個(gè)項(xiàng)目中的算法，個(gè)人感覺(jué)還可以，所以拿出來(lái)分享下。

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

原理：

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

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

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

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

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

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

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

實(shí)現(xiàn)：

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

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

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

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

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

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

原理的實(shí)現(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下載

您可能感興趣的文章:

相關(guān)文章

jQuery+JSON實(shí)現(xiàn)AJAX二級(jí)聯(lián)動(dòng)實(shí)例分析
這篇文章主要介紹了jQuery+JSON實(shí)現(xiàn)AJAX二級(jí)聯(lián)動(dòng)的方法,以實(shí)例形式分析了前臺(tái)jQuery結(jié)合ajax傳遞json格式數(shù)據(jù)及后臺(tái)數(shù)據(jù)處理技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-12-12
jQuery深拷貝Json對(duì)象簡(jiǎn)單示例
這篇文章主要介紹了jQuery深拷貝Json對(duì)象的簡(jiǎn)單實(shí)現(xiàn)方法,以簡(jiǎn)單示例形式分析了jQuery深拷貝的操作技巧,需要的朋友可以參考下
2016-07-07
jQuery+json實(shí)現(xiàn)的簡(jiǎn)易Ajax調(diào)用實(shí)例
這篇文章主要介紹了jQuery+json實(shí)現(xiàn)的簡(jiǎn)易Ajax調(diào)用,結(jié)合實(shí)例形式分析了jQuery基于ajax實(shí)現(xiàn)json傳參調(diào)用的技巧,需要的朋友可以參考下
2015-12-12
jQuery插件jcrop+Fileapi完美實(shí)現(xiàn)圖片上傳+裁剪+預(yù)覽的代碼分享
這篇文章主要介紹了jQuery插件jcrop+Fileapi完美實(shí)現(xiàn)圖片上傳+裁剪+預(yù)覽的代碼，非常的簡(jiǎn)單實(shí)用，效果也很棒，有需要的小伙伴可以參考下。
2015-04-04
Labelauty–jQuery單選框/復(fù)選框美化插件分享
這篇文章主要介紹了Labelauty–jQuery單選框/復(fù)選框美化插件，能夠?qū)崿F(xiàn)單選框/復(fù)選框原本的選中、未選中、禁用等功能外，還能夠設(shè)置選中和未選中的文本信息、標(biāo)簽的最小寬度等，感興趣的小伙伴可以參考下。
2015-09-09
如何確保JavaScript的執(zhí)行順序之jQuery.html并非萬(wàn)能鑰匙
在上一篇文章《如何確保JavaScript的執(zhí)行順序 - 之jQuery.html深度分析》中，我們揭示了jQuery.html函數(shù)之所以能在各種瀏覽器下保持動(dòng)態(tài)JS順序執(zhí)行，其秘密在于 – 同步AJAX獲取外部JavaScript。
2011-03-03
jQuery ajax在GBK編碼下表單提交終極解決方案(非二次編碼方法)
當(dāng)jquery ajax在utf-8編碼下（頁(yè)面utf－8，接收utf-8），無(wú)任何問(wèn)題?？梢哉ost、get，處理頁(yè)面直接獲取正確的內(nèi)容。
2010-10-10
jQuery中獲取checkbox選中項(xiàng)等操作及注意事項(xiàng)
今天在做一個(gè)項(xiàng)目功能時(shí)需要顯示checkbox選項(xiàng)來(lái)讓用戶進(jìn)行選擇，由于前端不是很熟練，所以做了一個(gè)簡(jiǎn)單的Demo，其中遇到一些小問(wèn)題，特記錄下來(lái)，希望能幫到遇到類似問(wèn)題的同學(xué)們
2013-11-11
基于jQuery實(shí)現(xiàn)表格的排序
本篇文章介紹了jQuery實(shí)現(xiàn)表格的排序方法與主要思路，相信會(huì)對(duì)大家有所幫助，下面就跟小編一起來(lái)看看吧
2016-12-12
jQuery插件FusionCharts實(shí)現(xiàn)的2D面積圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件FusionCharts實(shí)現(xiàn)的2D面積圖效果,結(jié)合完整實(shí)例形式分析了FusionCharts繪制2D面積圖的完整步驟與相關(guān)屬性設(shè)置操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-03-03