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 相关文章推荐
拖动布局之保存布局页面cookies篇
Oct 29 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
Sep 01 Javascript
JavaScript获取Url里的参数
Dec 18 Javascript
JavaScript生成SQL查询表单的方法
Aug 13 Javascript
详解Javascript事件驱动编程
Jan 03 Javascript
JavaScript程序中的流程控制语句用法总结
May 23 Javascript
Vue.js每天必学之构造器与生命周期
Sep 05 Javascript
React 组件渲染和更新的实现代码示例
Feb 21 Javascript
一次让你了解全部JavaScript的作用域
Jun 24 Javascript
js实现点击图片在屏幕中间弹出放大效果
Sep 11 Javascript
vue.js click点击事件获取当前元素对象的操作
Aug 07 Javascript
JavaScript获取时区实现过程解析
Sep 24 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 Class 文章
2007/04/04 PHP
php 三大特点:封装,继承,多态
2017/02/19 PHP
PHP实现的简单组词算法示例
2018/04/10 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
jquery 追加tr和删除tr示例代码
2013/09/12 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
2013/11/21 Javascript
Jquery实现控件的隐藏和显示实例
2014/02/08 Javascript
jQuery+PHP打造滑动开关效果
2014/12/16 Javascript
JavaScript Sort 的一个错误用法示例
2015/03/20 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
2015/04/05 Javascript
js获取及修改网页背景色和字体色的方法
2015/12/29 Javascript
从零学习node.js之详解异步控制工具async(八)
2017/02/27 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
2017/03/06 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
2018/01/12 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
layui实现数据表格table分页功能(ajax异步)
2019/07/27 Javascript
国内常用的js类库大全(CDN公共库)
2020/06/24 Javascript
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
[01:07:17]EG vs Optic Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
[32:56]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.11
2020/12/16 DOTA
Python装饰器的函数式编程详解
2015/02/27 Python
Python单链表简单实现代码
2016/04/27 Python
Python可变参数*args和**kwargs用法实例小结
2018/04/27 Python
django_orm查询性能优化方法
2018/08/20 Python
python把1变成01的步骤总结
2019/02/27 Python
对python中的控制条件、循环和跳出详解
2019/06/24 Python
Python的Tkinter点击按钮触发事件的例子
2019/07/19 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
Python函数的定义方式与函数参数问题实例分析
2019/12/26 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
python使用bs4爬取boss直聘静态页面
2020/10/10 Python
残疾人小组计划书
2014/04/27 职场文书
2014年医德医风工作总结
2014/11/13 职场文书
合作合同协议书范本
2015/01/27 职场文书
举起手来观后感
2015/06/09 职场文书