jquery二级导航内容均分的原理及实现


Posted in Javascript onAugust 13, 2013

这个是去年做过的一个项目中的算法,个人感觉还可以,所以拿出来分享下。

背景:头部导航二级导航有些内容太长,一列的话太过难看,就要分成两列,要做到按块尽量均分,排列顺序没有限制。

原理:

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下载
Javascript 相关文章推荐
javascript温习的一些笔记 基础常用知识小结
Jun 22 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
Aug 06 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
Jun 15 Javascript
不得不分享的JavaScript常用方法函数集(下)
Dec 25 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
Nov 05 Javascript
JS中substring与substr的用法
Nov 16 Javascript
纯js实现html转pdf的简单实例(推荐)
Feb 16 Javascript
完美实现js选项卡切换效果(二)
Mar 08 Javascript
基于JavaScript实现的折半查找算法示例
Apr 14 Javascript
bootstrap table单元格新增行并编辑
May 19 Javascript
bootstrap fileinput实现文件上传功能
Aug 23 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
Oct 08 Javascript
模拟多级复选框效果的jquery代码
Aug 13 #Javascript
javascript 树形导航菜单实例代码
Aug 13 #Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
Aug 13 #Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
Aug 13 #Javascript
鼠标经过显示二级菜单js特效
Aug 13 #Javascript
Jquery实现搜索框提示功能示例代码
Aug 13 #Javascript
jquery固定底网站底部菜单效果
Aug 13 #Javascript
You might like
php将HTML表格每行每列转为数组实现采集表格数据的方法
2015/04/03 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
PHP扩展迁移为PHP7扩展兼容性问题记录
2016/02/15 PHP
解决laravel(5.5)访问public报错的问题
2019/10/12 PHP
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
2009/06/02 Javascript
JavaScript 原型继承
2011/12/26 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
JavaScript实现Flash炫光波动特效
2015/05/14 Javascript
jQuery中 prop() attr()使用详解
2015/05/19 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
2017/01/13 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
2017/04/07 Javascript
简单谈谈原生js的math对象
2017/06/27 Javascript
angularjs实现table增加tr的方法
2018/02/27 Javascript
layerUI下的绑定事件实例代码
2018/08/17 Javascript
Vue实现Layui的集成方法步骤
2020/04/10 Javascript
vue-i18n实现中英文切换的方法
2020/07/06 Javascript
Element Steps步骤条的使用方法
2020/07/26 Javascript
vue实现前端列表多条件筛选
2020/10/26 Javascript
[02:38]DOTA2英雄基础教程 噬魂鬼
2014/01/03 DOTA
[46:53]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python调用java的Webservice示例
2014/03/10 Python
python中enumerate函数遍历元素用法分析
2016/03/11 Python
在pyqt5中QLineEdit里面的内容回车发送的实例
2019/06/21 Python
python代码打印100-999之间的回文数示例
2019/11/24 Python
python中yield的用法详解
2021/01/13 Python
用CSS3实现无限循环的无缝滚动的实例代码
2017/07/04 HTML / CSS
静态成员和非静态成员的区别
2012/05/12 面试题
红领巾广播站广播稿
2014/02/01 职场文书
成龙洗发水广告词
2014/03/14 职场文书
征兵宣传标语
2014/06/20 职场文书
放射科岗位职责
2015/02/14 职场文书
护林员个人总结
2015/03/04 职场文书
纪委立案决定书
2015/06/24 职场文书
2016学习依法治国心得体会
2016/01/15 职场文书
python基于turtle绘制几何图形
2021/06/15 Python