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