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 相关文章推荐
关于hashchangebroker和statehashable的补充文档
Aug 08 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
Nov 13 Javascript
js的image onload事件使用遇到的问题
Jul 15 Javascript
详解Javascript继承的实现
Mar 25 Javascript
JavaScript数组的定义及数字操作技巧
Jun 06 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
May 30 Javascript
ionic 自定义弹框效果
Jun 27 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
Feb 28 Javascript
Postman模拟发送带token的请求方法
Mar 31 Javascript
Vue列表渲染的示例代码
Nov 01 Javascript
JavaScript遍历数组的方法代码实例
Jan 14 Javascript
微信小程序实现倒计时功能
Nov 19 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
Discuz 模板语句分析及知识技巧
2009/08/21 PHP
php编程实现获取excel文档内容的代码实例
2011/06/28 PHP
php preg_replace替换实例讲解
2013/11/04 PHP
php访问数组最后一个元素的函数end()用法
2015/03/18 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
json格式化/压缩工具 Chrome插件扩展版
2010/05/25 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
关于JavaScript的with 语句的使用方法
2011/05/09 Javascript
Node.js中的流(Stream)介绍
2015/03/30 Javascript
JS选项卡动态替换banner图片路径的方法
2015/05/11 Javascript
JS实现生成会变大变小的圆环实例
2015/08/05 Javascript
javascript 判断两个日期之差的示例代码
2015/09/05 Javascript
微信开发 js实现tabs选项卡效果
2016/10/28 Javascript
JS日程管理插件FullCalendar简单实例
2017/02/07 Javascript
jQuery插件ContextMenu自定义图标
2017/03/15 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
2017/05/08 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
详解从react转职到vue开发的项目准备
2019/01/14 Javascript
基于Vue插入视频的2种方法小结
2019/04/02 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
python基础教程之简单入门说明(变量和控制语言使用方法)
2014/03/25 Python
Python3单行定义多个变量或赋值方法
2018/07/12 Python
Python函数参数操作详解
2018/08/03 Python
python实现矩阵打印
2019/03/02 Python
TensorFlow卷积神经网络之使用训练好的模型识别猫狗图片
2019/03/14 Python
Python @property使用方法解析
2019/09/17 Python
完美解决ARIMA模型中plot_acf画不出图的问题
2020/06/04 Python
python实现简单的五子棋游戏
2020/09/01 Python
如何通过python计算圆周率PI
2020/11/11 Python
关于Python3的import问题(pycharm可以运行命令行import错误)
2020/11/18 Python
大学生个人推荐信范文
2013/11/25 职场文书
医药代表个人的求职信分享
2013/12/08 职场文书
建筑项目策划书
2014/01/13 职场文书
优秀电子工程系毕业生求职信
2014/05/24 职场文书
幼儿园家长心得体会
2016/01/21 职场文书
js实现自动锁屏功能
2021/06/02 Javascript