jquery二级导航内容均分的原理及实现
更新时间：2013年08月13日 16:33:36 作者：
头部导航二级导航有些内容太长，一列的话太过难看，就要分成两列，要做到按块尽量均分，排列顺序没有限制
这个是去年做过的一个项目中的算法，个人感觉还可以，所以拿出来分享下。
背景：头部导航二级导航有些内容太长，一列的话太过难看，就要分成两列，要做到按块尽量均分，排列顺序没有限制。
原理：
1.把各个二级导航做为一个独立的，内部分成多个块，算出各块的高度，升序排列。
2.求出各块的总高度和，除2得到平均最高的高度。
3.从块的高度最高的开始，如果高度大于平均高度，则这块放入A边，其他的分至B边。
4.如果小于这个高度，则平均高度变为减去最高高度的值。
5.取剩下最高的高度与平均高度比，如果高度大于平均高度，则这块放入A边，其他的分至B边。
6.循环3-5直到所有块都结束。
这是这个代码的主要思路，这样就把一个导航的内容分成了平均的两列。
实现：
当只有一个块时，不用比较
if (arrs.length <= 1) {
$(obj).css({
width : "150px"
});
return;
}
当总高不高于限高时，没有必要分成两列：
if (sum < limitHeight) {
$(obj).css({
width : "150px"
});
return;
}
原理的实现代码：
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.如果小于这个高度，则平均高度变为减去最高高度的值。
5.取剩下最高的高度与平均高度比，如果高度大于平均高度，则这块放入A边，其他的分至B边。
6.循环3-5直到所有块都结束。
这是这个代码的主要思路，这样就把一个导航的内容分成了平均的两列。
实现：
当只有一个块时，不用比较
复制代码 代码如下:
if (arrs.length <= 1) {
$(obj).css({
width : "150px"
});
return;
}
当总高不高于限高时，没有必要分成两列：
复制代码 代码如下:
if (sum < limitHeight) {
$(obj).css({
width : "150px"
});
return;
}
原理的实现代码：
复制代码 代码如下:
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
今日闲来无事，把上次写的代码稍微改了改。增加了动态追加和删除股票信息的功能（代码基于jquery运行：http://jquery.com/） 。由于对Ajax技术的认识还只是在初级阶段，总觉得这么些有点别扭，希望大虾能够指点一二。2008-11-11
这篇文章主要介绍了jQuery+AJAX实现遮罩层登录验证界面，并分享了源码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-10-10
本文主要介绍了jQuery的ready方法的使用方法，用此方法实现了当爷们加载完成后才执行的效果，有相同需求的小伙伴可以参考下。2014-11-11
最近做项目时碰到一个需求，就是在移动端支付页面点击支付按钮弹出一个支付键盘，类似于支付宝的那种。项目只是单纯的手机网站，所以这个功能由前端来实现，下面小编给大家带来了jQuery仿移动端支付宝键盘的实现代码，需要的朋友参考下吧2018-08-08
本文主要介绍了jquery实现弹窗功能且弹出确认框始终位于窗口中间位置的实例，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
jQuery Mobile框架主要针对移动端的Web UI设计,其中丰富的表单组件调用起来也是相当方便,接下来就为大家整理了一份jQuery Mobile框架中的表单组件基础使用教程,需要的朋友可以参考下2016-05-05
jQuery Validation Engine验证控件调用外部函数验证的方法
这篇文章主要介绍了jQuery Validation Engine验证控件调用外部函数验证的方法，需要的的朋友参考下吧2017-01-01
Draggable是easyui中用于实现拖拽功能的一个插件。利用它，我们可以实现控件的拖拽效果。Draggble覆盖默认值$.fn.draggable.defaults。2015-08-08
这篇文章主要介绍了jQuery+ajax中getJSON() 用法实例,需要的朋友可以参考下2014-12-12
最新评论