jquery二級導航內容均分的原理及實現(xiàn)
更新時間：2013年08月13日 16:33:36 作者：
頭部導航二級導航有些內容太長，一列的話太過難看，就要分成兩列，要做到按塊盡量均分，排列順序沒有限制
這個是去年做過的一個項目中的算法，個人感覺還可以，所以拿出來分享下。
背景：頭部導航二級導航有些內容太長，一列的話太過難看，就要分成兩列，要做到按塊盡量均分，排列順序沒有限制。
原理：
1.把各個二級導航做為一個獨立的，內部分成多個塊，算出各塊的高度，升序排列。
2.求出各塊的總高度和，除2得到平均最高的高度。
3.從塊的高度最高的開始，如果高度大于平均高度，則這塊放入A邊，其他的分至B邊。
4.如果小于這個高度，則平均高度變?yōu)闇p去最高高度的值。
5.取剩下最高的高度與平均高度比，如果高度大于平均高度，則這塊放入A邊，其他的分至B邊。
6.循環(huán)3-5直到所有塊都結束。
這是這個代碼的主要思路，這樣就把一個導航的內容分成了平均的兩列。
實現(xiàn)：
當只有一個塊時，不用比較
if (arrs.length <= 1) {
$(obj).css({
width : "150px"
});
return;
}
當總高不高于限高時，沒有必要分成兩列：
if (sum < limitHeight) {
$(obj).css({
width : "150px"
});
return;
}
原理的實現(xiàn)代碼：
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下載
背景：頭部導航二級導航有些內容太長，一列的話太過難看，就要分成兩列，要做到按塊盡量均分，排列順序沒有限制。
原理：
1.把各個二級導航做為一個獨立的，內部分成多個塊，算出各塊的高度，升序排列。
2.求出各塊的總高度和，除2得到平均最高的高度。
3.從塊的高度最高的開始，如果高度大于平均高度，則這塊放入A邊，其他的分至B邊。
4.如果小于這個高度，則平均高度變?yōu)闇p去最高高度的值。
5.取剩下最高的高度與平均高度比，如果高度大于平均高度，則這塊放入A邊，其他的分至B邊。
6.循環(huán)3-5直到所有塊都結束。
這是這個代碼的主要思路，這樣就把一個導航的內容分成了平均的兩列。
實現(xiàn)：
當只有一個塊時，不用比較
復制代碼 代碼如下:
if (arrs.length <= 1) {
$(obj).css({
width : "150px"
});
return;
}
當總高不高于限高時，沒有必要分成兩列：
復制代碼 代碼如下:
if (sum < limitHeight) {
$(obj).css({
width : "150px"
});
return;
}
原理的實現(xiàn)代碼：
復制代碼 代碼如下:
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下載
相關文章
這篇文章主要為大家詳細介紹了jquery仿QQ登錄賬號選擇下拉框效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03
今日閑來無事，把上次寫的代碼稍微改了改。增加了動態(tài)追加和刪除股票信息的功能（代碼基于jquery運行：http://jquery.com/） 。由于對Ajax技術的認識還只是在初級階段，總覺得這么些有點別扭，希望大蝦能夠指點一二。2008-11-11
jQuery+AJAX實現(xiàn)遮罩層登錄驗證界面（附源碼）
這篇文章主要介紹了jQuery+AJAX實現(xiàn)遮罩層登錄驗證界面，并分享了源碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-10-10
本文主要介紹了jQuery的ready方法的使用方法，用此方法實現(xiàn)了當爺們加載完成后才執(zhí)行的效果，有相同需求的小伙伴可以參考下。2014-11-11
最近做項目時碰到一個需求，就是在移動端支付頁面點擊支付按鈕彈出一個支付鍵盤，類似于支付寶的那種。項目只是單純的手機網(wǎng)站，所以這個功能由前端來實現(xiàn)，下面小編給大家?guī)砹薺Query仿移動端支付寶鍵盤的實現(xiàn)代碼，需要的朋友參考下吧2018-08-08
本文主要介紹了jquery實現(xiàn)彈窗功能且彈出確認框始終位于窗口中間位置的實例，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
jQuery Mobile框架主要針對移動端的Web UI設計,其中豐富的表單組件調用起來也是相當方便,接下來就為大家整理了一份jQuery Mobile框架中的表單組件基礎使用教程,需要的朋友可以參考下2016-05-05
jQuery Validation Engine驗證控件調用外部函數(shù)驗證的方法
這篇文章主要介紹了jQuery Validation Engine驗證控件調用外部函數(shù)驗證的方法，需要的的朋友參考下吧2017-01-01
easyui Draggable組件實現(xiàn)拖動效果
Draggable是easyui中用于實現(xiàn)拖拽功能的一個插件。利用它，我們可以實現(xiàn)控件的拖拽效果。Draggble覆蓋默認值$.fn.draggable.defaults。2015-08-08
這篇文章主要介紹了jQuery+ajax中getJSON() 用法實例,需要的朋友可以參考下2014-12-12