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 eval函数深入认识
Feb 21 Javascript
JavaScript Object的extend是一个常用的功能
Dec 02 Javascript
JavaScript面向对象之静态与非静态类
Feb 03 Javascript
兼容IE和FF的js脚本代码小结(比较常用)
Dec 06 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
May 10 Javascript
swiper动态改变滑动内容的实现方法
Jan 17 Javascript
原生JavaScript实现的简单放大镜效果示例
Feb 07 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
Mar 08 Javascript
node express使用HTML模板的方法示例
Aug 22 Javascript
基于JS实现父组件的请求服务过程解析
Oct 14 Javascript
echarts实现折线图的拖拽效果
Dec 19 Javascript
JavaScript实时更新当前的时间的示例代码
Jul 15 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
typecho插件编写教程(六):调用接口
2015/05/28 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
可输入的下拉框
2006/06/19 Javascript
JQuery each()函数如何优化循环DOM结构的性能
2012/12/10 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
2015/03/17 Javascript
js实现漂浮回顶部按钮实例
2015/05/06 Javascript
JavaScript中var关键字的使用详解
2015/08/14 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
2015/09/01 Javascript
javascript关于继承解析
2016/05/10 Javascript
修改jquery中dialog的title属性方法(推荐)
2016/08/26 Javascript
js调用屏幕宽度的简单方法
2016/11/14 Javascript
jquery获取下拉框中的循环值
2017/02/08 Javascript
JavaScript实现简单的树形菜单效果
2017/06/23 Javascript
基于Datatables跳转到指定页的简单实例
2017/11/09 Javascript
vue 指定组件缓存实例详解
2018/04/01 Javascript
Python实现的几个常用排序算法实例
2014/06/16 Python
Python 冒泡,选择,插入排序使用实例
2015/02/05 Python
介绍Python中的fabs()方法的使用
2015/05/14 Python
简单学习Python time模块
2016/04/29 Python
python模仿网页版微信发送消息功能
2018/02/24 Python
python中使用iterrows()对dataframe进行遍历的实例
2018/06/09 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
如何在python开发工具PyCharm中搭建QtPy环境(教程详解)
2020/02/04 Python
Python描述数据结构学习之哈夫曼树篇
2020/09/07 Python
CSS3制作气泡对话框的实例教程
2016/05/10 HTML / CSS
Lookfantastic日本官网:英国知名护肤、化妆品和头发护理购物网站
2018/04/21 全球购物
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
如何写辞职书
2015/02/26 职场文书
关于环保的广播稿
2015/12/17 职场文书
导游词之大雁塔景区
2019/09/17 职场文书
nginx location中多个if里面proxy_pass的方法
2021/03/31 Servers
Mysql官方性能测试工具mysqlslap的使用简介
2021/05/21 MySQL
python引入其他文件夹下的py文件具体方法
2021/05/23 Python
使用Python解决图表与画布的间距问题
2022/04/11 Python
golang连接MySQl使用sqlx库
2022/04/14 Golang
使用refresh_token实现无感刷新页面
2022/04/26 Javascript