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 相关文章推荐
基于Web标准的UI组件 — 树状菜单(2)
Sep 18 Javascript
硬盘浏览程序,保存成网页格式便可使用
Dec 03 Javascript
javascript通过class来获取元素实现代码
Feb 20 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
May 07 Javascript
JavaScript中constructor()方法的使用简介
Jun 05 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
Sep 14 Javascript
BootStrap glyphicons 字体图标实现方法
May 01 Javascript
jQuery实现简单倒计时功能的方法
Jul 04 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
Mar 28 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
Apr 11 Javascript
ES6小技巧之代替lodash
Jun 07 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+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
WordPress开发中的get_post_custom()函数使用解析
2016/01/04 PHP
XML的代替者----JSON
2007/07/21 Javascript
用js脚本控制asp.net下treeview的NodeCheck的实现代码
2010/03/02 Javascript
JQuery for与each性能比较分析
2013/05/14 Javascript
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
浅谈JS函数定义方式的区别
2016/10/30 Javascript
原生JS实现小小的音乐播放器
2017/10/16 Javascript
Node.js文件编码格式的转换的方法
2018/04/27 Javascript
angularjs的单选框+ng-repeat的实现方法
2018/09/12 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
2019/01/04 Javascript
vue2配置scss的方法步骤
2019/06/06 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
浅谈实现在线预览PDF的几种解决办法
2020/08/10 Javascript
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
小结Python用fork来创建子进程注意事项
2014/07/03 Python
Python实现完整的事务操作示例
2017/06/20 Python
Python使用sorted排序的方法小结
2017/07/28 Python
python实现多线程行情抓取工具的方法
2018/02/28 Python
使用Python获取并处理IP的类型及格式方法
2018/11/01 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
Python使用socket_TCP实现小文件下载功能
2020/10/09 Python
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
纪伊国屋新加坡网上书店:Kinokuniya新加坡
2017/12/29 全球购物
客户代表实习人员自我鉴定
2013/09/27 职场文书
会计电算化应届生求职信
2013/11/03 职场文书
文明家庭先进事迹材
2014/01/27 职场文书
小学生关于梦想的演讲稿
2014/08/22 职场文书
解除劳动关系协议书范文
2014/09/11 职场文书
五四青年节活动总结
2015/02/10 职场文书
装修公司工程部经理岗位职责
2015/04/09 职场文书
党支部审查意见
2015/06/02 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
MySQL深度分页(千万级数据量如何快速分页)
2021/07/25 MySQL