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 相关文章推荐
JQuery实现用户名无刷新验证的小例子
Mar 22 Javascript
JS delegate与live浅析
Dec 21 Javascript
JQuery 控制内容长度超出规定长度显示省略号
May 23 Javascript
node.js中的console.time方法使用说明
Dec 09 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
Jul 29 Javascript
JavaScript数组操作详解
Feb 04 Javascript
JS实现的简单标签点击切换功能示例
Sep 21 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 Javascript
一百行JS代码实现一个校验工具
Apr 30 Javascript
axios异步提交表单数据的几种方法
Aug 11 Javascript
react中hook介绍以及使用教程
Dec 11 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
在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)
2010/05/04 PHP
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
javascript之ESC(第二类混淆)
2007/05/06 Javascript
javascript 操作select下拉列表框的一点小经验
2010/03/20 Javascript
50款非常棒的 jQuery 插件分享
2012/03/29 Javascript
JS实现的仿QQ空间图片弹出效果代码
2016/02/23 Javascript
JavaScript九九乘法口诀表的简单实现
2016/10/04 Javascript
微信小程序 参数传递详解
2016/10/24 Javascript
利用node.js如何搭建一个简易的即时响应服务器
2017/05/28 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
浅谈angular4 ng-content 中隐藏的内容
2017/08/18 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
2018/08/25 Javascript
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python33 urllib2使用方法细节讲解
2013/12/03 Python
使用Python的内建模块collections的教程
2015/04/28 Python
python并发编程之多进程、多线程、异步和协程详解
2016/10/28 Python
python实现中文文本分句的例子
2019/07/15 Python
Django模型中字段属性choice使用说明
2020/03/30 Python
Django数据统计功能count()的使用
2020/11/30 Python
python中K-means算法基础知识点
2021/01/25 Python
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
HTML5中的强制下载属性download使用实例解析
2016/05/12 HTML / CSS
bareMinerals官网:矿物质化妆品和护肤品
2018/02/04 全球购物
navabi英国:设计师大码女装
2019/06/25 全球购物
全球领先的在线cosplay服装商店:RoleCosplay
2020/01/18 全球购物
电大学习个人自我评价范文
2013/10/04 职场文书
技术比武方案
2014/05/19 职场文书
学校班班通实施方案
2014/06/11 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
个人学习总结范文
2015/02/15 职场文书
大学生入党自荐书
2015/03/05 职场文书
就业推荐表院系意见
2015/06/05 职场文书
Python-typing: 类型标注与支持 Any类型详解
2021/05/10 Python
SpringBoot+Redis实现布隆过滤器的示例代码
2022/03/17 Java/Android
PostgreSQL 插入INSERT、删除DELETE、更新UPDATE、事务transaction
2022/04/12 PostgreSQL