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 相关文章推荐
用JSON做数据传输格式中的一些问题总结
Dec 21 Javascript
学习js在线html(富文本,所见即所得)编辑器
Dec 18 Javascript
js 中的switch表达式使用示例
Jun 03 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
Jul 15 Javascript
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
深入探究node之Transform
Jul 20 Javascript
angular2系列之路由转场动画的示例代码
Nov 09 Javascript
微信小程序实现折叠与展开文章功能
Jun 12 Javascript
cocos2dx+lua实现橡皮擦功能
Dec 20 Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
vue项目中使用fetch的实现方法
Apr 25 Javascript
JS面向对象实现飞机大战
Aug 26 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调用三种数据库的方法(1)
2006/10/09 PHP
php开发工具之vs2005图解
2008/01/12 PHP
PHP iconv 函数转gb2312的bug解决方法
2009/10/11 PHP
php输出金字塔的2种实现方法
2014/12/16 PHP
PHP __call()方法实现委托示例
2019/05/20 PHP
在Laravel的Model层做数据缓存的实现
2019/09/26 PHP
有趣的javascript数组定义方法
2010/09/10 Javascript
javascript实现全角转半角的方法
2016/01/23 Javascript
jQuery常用知识点总结以及平时封装常用函数
2016/02/23 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
2016/09/26 Javascript
纯JS打造网页中checkbox和radio的美化效果
2016/10/13 Javascript
详解JavaScript中this的指向问题
2017/01/20 Javascript
jQuery实现菜单栏导航效果
2017/08/15 jQuery
webpack css加载和图片加载的方法示例
2018/09/11 Javascript
Python常见文件操作的函数示例代码
2011/11/15 Python
python实现的生成随机迷宫算法核心代码分享(含游戏完整代码)
2014/07/11 Python
python进行TCP端口扫描的实现
2018/12/21 Python
在Python中居然可以定义两个同名通参数的函数
2019/01/31 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
详解基于python-django框架的支付宝支付案例
2019/09/23 Python
基于python操作ES实例详解
2019/11/16 Python
Python unittest单元测试框架及断言方法
2020/04/15 Python
6种非常炫酷的CSS3按钮边框动画特效
2016/03/16 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
2018/03/21 HTML / CSS
阿联酋电子产品购物网站:Menakart
2017/09/15 全球购物
纪律教育学习心得体会
2014/09/02 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
2014年银行年终工作总结
2014/12/19 职场文书
离婚协议书怎么写
2015/01/26 职场文书
2015年学习部工作总结范文
2015/03/31 职场文书
2015年物业公司保洁工作总结
2015/10/22 职场文书
2016年敬老月活动总结
2016/04/05 职场文书
python基础详解之if循环语句
2021/04/24 Python
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python
SQL写法--行行比较
2021/08/23 SQL Server
JS的深浅复制详细
2021/10/16 Javascript