快捷導(dǎo)航

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

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

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

這個是去年做過的一個項(xià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)容分成了平均的兩列。

實(shí)現(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; 
} 

原理的實(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仿QQ登錄賬號選擇下拉框效果
這篇文章主要為大家詳細(xì)介紹了jquery仿QQ登錄賬號選擇下拉框效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-03-03
ajax無刷新動態(tài)調(diào)用股票信息(改良版)
今日閑來無事，把上次寫的代碼稍微改了改。增加了動態(tài)追加和刪除股票信息的功能（代碼基于jquery運(yùn)行：http://jquery.com/）。由于對Ajax技術(shù)的認(rèn)識還只是在初級階段，總覺得這么些有點(diǎn)別扭，希望大蝦能夠指點(diǎn)一二。
2008-11-11
jQuery+AJAX實(shí)現(xiàn)遮罩層登錄驗(yàn)證界面（附源碼）
這篇文章主要介紹了jQuery+AJAX實(shí)現(xiàn)遮罩層登錄驗(yàn)證界面，并分享了源碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2015-10-10
jQuery的ready方法詳解
本文主要介紹了jQuery的ready方法的使用方法，用此方法實(shí)現(xiàn)了當(dāng)爺們加載完成后才執(zhí)行的效果，有相同需求的小伙伴可以參考下。
2014-11-11
jQuery仿移動端支付寶鍵盤的實(shí)現(xiàn)代碼
最近做項(xiàng)目時碰到一個需求，就是在移動端支付頁面點(diǎn)擊支付按鈕彈出一個支付鍵盤，類似于支付寶的那種。項(xiàng)目只是單純的手機(jī)網(wǎng)站，所以這個功能由前端來實(shí)現(xiàn)，下面小編給大家?guī)砹薺Query仿移動端支付寶鍵盤的實(shí)現(xiàn)代碼，需要的朋友參考下吧
2018-08-08
jquery實(shí)現(xiàn)彈窗功能（窗口居中顯示）
本文主要介紹了jquery實(shí)現(xiàn)彈窗功能且彈出確認(rèn)框始終位于窗口中間位置的實(shí)例，具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02
jQuery Mobile框架中的表單組件基礎(chǔ)使用教程
jQuery Mobile框架主要針對移動端的Web UI設(shè)計(jì),其中豐富的表單組件調(diào)用起來也是相當(dāng)方便,接下來就為大家整理了一份jQuery Mobile框架中的表單組件基礎(chǔ)使用教程,需要的朋友可以參考下
2016-05-05
jQuery Validation Engine驗(yàn)證控件調(diào)用外部函數(shù)驗(yàn)證的方法
這篇文章主要介紹了jQuery Validation Engine驗(yàn)證控件調(diào)用外部函數(shù)驗(yàn)證的方法，需要的的朋友參考下吧
2017-01-01
easyui Draggable組件實(shí)現(xiàn)拖動效果
Draggable是easyui中用于實(shí)現(xiàn)拖拽功能的一個插件。利用它，我們可以實(shí)現(xiàn)控件的拖拽效果。Draggble覆蓋默認(rèn)值$.fn.draggable.defaults。
2015-08-08
jQuery+ajax中g(shù)etJSON() 用法實(shí)例
這篇文章主要介紹了jQuery+ajax中g(shù)etJSON() 用法實(shí)例,需要的朋友可以參考下
2014-12-12