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语言结构小记(一)
Sep 10 Javascript
javascript ready和load事件的区别示例介绍
Aug 30 Javascript
JS教程:window.location使用方法的区别介绍
Oct 04 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
Nov 09 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
Dec 14 Javascript
利用vue写todolist单页应用
Dec 15 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 Javascript
小程序实现按下录音松开识别语音
Nov 22 Javascript
vue项目创建步骤及路由router
Jan 14 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
模拟多级复选框效果的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
在普通HTTP上安全地传输密码
2007/07/21 PHP
仿服务器端脚本方式的JS模板实现方法
2007/04/27 Javascript
基于json的jquery地区联动效果代码
2011/07/06 Javascript
Javascript base64编码实现代码
2011/12/02 Javascript
用javascript添加控件自定义属性解析
2013/11/25 Javascript
不提示直接关闭网页窗口的JS示例代码
2013/12/17 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
javascript面向对象快速入门实例
2015/01/13 Javascript
详解JavaScript对象序列化
2016/01/19 Javascript
DWR中各种java方法的调用
2016/05/04 Javascript
利用原生JS自动生成文章标题树的实例
2016/08/22 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
2016/09/08 Javascript
ajax的分页查询示例(不刷新页面)
2017/01/11 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
nodejs使用express获取get和post传值及session验证的方法
2017/11/09 NodeJs
react build 后打包发布总结
2018/08/24 Javascript
webpack@v4升级踩坑(小结)
2018/10/08 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
Echarts实现多条折线可拖拽效果
2019/12/19 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
2020/06/16 Javascript
python使用内存zipfile对象在内存中打包文件示例
2014/04/30 Python
Python实现数通设备端口使用情况监控实例
2015/07/15 Python
Django 如何获取前端发送的头文件详解(推荐)
2017/08/15 Python
分析python动态规划的递归、非递归实现
2018/03/04 Python
对pandas里的loc并列条件索引的实例讲解
2018/11/15 Python
pycharm修改文件的默认打开方式的步骤
2019/07/29 Python
用Python解数独的方法示例
2019/10/24 Python
Python爬虫如何应对Cloudflare邮箱加密
2020/06/24 Python
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
出纳岗位职责模板
2013/11/27 职场文书
黄继光的英雄事迹材料
2014/02/13 职场文书
安全责任书范文
2014/08/25 职场文书
2014年国庆节活动总结
2014/08/26 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
《陶罐和铁罐》教学反思
2016/03/03 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书