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 相关文章推荐
JS实现浏览器菜单命令
Sep 05 Javascript
关于JavaScript中var声明变量作用域的推断
Dec 16 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
Oct 09 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
Sep 02 Javascript
使图片旋转的3种解决方案
Nov 21 Javascript
jquery创建表格(自动增加表格)代码分享
Dec 25 Javascript
JavaScript Promise启示录
Aug 12 Javascript
Jquery轮播效果实现过程解析
Mar 30 Javascript
javascript实现简单的ajax封装示例
Dec 28 Javascript
jquery实现图片上传前本地预览
Apr 28 jQuery
vue路由守卫及路由守卫无限循环问题详析
Sep 05 Javascript
js滚轮事件 js自定义滚动条的实现
Jan 18 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
全国FM电台频率大全 - 26 西藏自治区
2020/03/11 无线电
使用 MySQL 开始 PHP 会话
2006/12/21 PHP
JavaScript学习笔记(十)
2010/01/17 Javascript
SOSO地图JS画出标注和中心点以html形式运行
2013/08/09 Javascript
javascript中RegExp保留小数点后几位数的方法分享
2013/08/13 Javascript
JavaScript中的迭代器和生成器详解
2014/10/29 Javascript
HTML5 js实现拖拉上传文件功能
2020/11/20 Javascript
js仿淘宝商品放大预览功能
2017/03/15 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
2017/08/28 jQuery
webpack external模块的具体使用
2018/03/10 Javascript
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
生成无限制的微信小程序码的示例代码
2019/09/20 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
nodejs语言实现验证码生成功能的示例代码
2019/10/13 NodeJs
vue实现表单未编辑或未保存离开弹窗提示功能
2020/04/08 Javascript
Vue列表循环从指定下标开始的多种解决方案
2020/04/08 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
2020/07/24 Javascript
Python计算三角函数之asin()方法的使用
2015/05/15 Python
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
python 读取DICOM头文件的实例
2018/05/07 Python
浅谈Python接口对json串的处理方法
2018/12/19 Python
解决pyshp UnicodeDecodeError的问题
2019/12/06 Python
IronPython连接MySQL的方法步骤
2019/12/27 Python
Python爬取365好书中小说代码实例
2020/02/28 Python
python-xpath获取html文档的部分内容
2020/03/06 Python
用Python开发app后端有优势吗
2020/06/29 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
weblogic面试题
2016/03/07 面试题
教导主任竞聘演讲稿
2014/05/16 职场文书
领导班子四风对照检查材料思想汇报
2014/09/26 职场文书
优秀大学生自荐信
2015/03/26 职场文书
《刺客之王:C罗全景传记》:时代从来不会亏待手艺人
2019/11/28 职场文书
P站美图推荐——变身女主角特辑
2022/03/20 日漫
漫改真人电影「萌系男友是燃燃的橘色」公开先导视觉图
2022/03/21 日漫