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高级程序设计 读书笔记之十 本地对象Date日期
Feb 27 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
Jan 23 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
Jun 12 Javascript
简单实用jquery版三级联动select示例
Jul 04 Javascript
json数据的列循环示例
Sep 06 Javascript
js如何设置在iframe框架中指定div不显示
Dec 04 Javascript
对之前写的jquery分页做下升级
Jun 19 Javascript
每天一篇javascript学习小结(属性定义方法)
Nov 19 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
Sep 27 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
Feb 13 Javascript
axios 实现post请求时把对象obj数据转为formdata
Oct 31 Javascript
JS this关键字在ajax中使用出现问题解决方案
Jul 17 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正则表达式之定界符和原子介绍
2012/10/05 PHP
php把session写入数据库示例
2014/02/26 PHP
php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
2014/12/15 PHP
Code: write(s,d) 输出连续字符串
2007/08/19 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
js replace正则表达式应用案例讲解
2013/01/17 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
2013/10/24 Javascript
JavaScript中const、var和let区别浅析
2016/10/11 Javascript
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
基于datepicker定义自己的angular时间组件的示例
2018/03/14 Javascript
RequireJS用法简单示例
2018/08/20 Javascript
一个小时快速搭建微信小程序的方法步骤
2019/04/15 Javascript
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
Python的加密模块md5、sha、crypt使用实例
2014/09/28 Python
python操作sqlite的CRUD实例分析
2015/05/08 Python
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
使用python装饰器计算函数运行时间的实例
2018/04/21 Python
Python3模拟curl发送post请求操作示例
2019/05/03 Python
Python3.7 新特性之dataclass装饰器
2019/05/27 Python
Pytorch模型转onnx模型实例
2020/01/15 Python
Python实现ATM系统
2020/02/17 Python
Python 实现3种回归模型(Linear Regression,Lasso,Ridge)的示例
2020/10/15 Python
如何使用Pytorch搭建模型
2020/10/26 Python
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
世界上最大的二手相机店:KEN
2017/05/17 全球购物
第二层交换机和路由器的区别?第三层交换机和路由器的区别?
2013/05/23 面试题
平面设计师工作职责范文
2013/12/03 职场文书
大学生个人自荐信
2014/02/24 职场文书
天猫某品牌专卖店运营计划书
2014/03/21 职场文书
医院信息公开实施方案
2014/05/09 职场文书
乡镇平安建设汇报材料
2014/08/25 职场文书
学校2014重阳节活动策划方案
2014/09/16 职场文书
学校开除通知书
2015/04/25 职场文书
升学宴来宾致辞
2015/07/27 职场文书
HDFS免重启挂载新磁盘
2022/04/06 Servers
VW、VH适配移动端的解决方案与常见问题
2023/05/21 HTML / CSS