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中获得$.ajax()事件返回的值并添加事件的方法
Apr 15 Javascript
jquery图片切换实例分析
Apr 15 Javascript
基于jquery实现省市区三级联动效果
Dec 25 Javascript
js获取新浪天气接口的实现代码
Jun 06 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
Nov 01 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 Javascript
JavaScript变量作用域_动力节点Java学院整理
Jun 27 Javascript
vue小图标favicon不显示的解决方案
Sep 19 Javascript
5 种JavaScript编码规范
Jan 30 Javascript
浅谈JS对象添加getter与setter的5种方法
Jun 09 Javascript
angular实现input输入监听的示例
Aug 31 Javascript
layui实现三级联动效果
Jul 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
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
一款JavaScript压缩工具:X2JSCompactor
2007/06/13 Javascript
基于jquery的划词搜索实现(备忘)
2010/09/14 Javascript
图片img的src不变让浏览器重新加载实现方法
2013/03/29 Javascript
热点新闻滚动特效的js代码
2013/08/17 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
JavaScript检测鼠标移动方向的方法
2015/05/22 Javascript
Jquery全选与反选点击执行一次的解决方案
2015/08/14 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
2016/06/30 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
2017/01/16 Javascript
JS简单获取当前年月日星期的方法示例
2017/02/07 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
2017/04/13 Javascript
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
webpack项目轻松混用css module的方法
2018/06/12 Javascript
vue项目中使用tinymce编辑器的步骤详解
2018/09/11 Javascript
angular4笔记系列之内置指令小结
2018/11/09 Javascript
详解vue 2.6 中 slot 的新用法
2019/07/09 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
python TCP Socket的粘包和分包的处理详解
2018/02/09 Python
使用Python开发SQLite代理服务器的方法
2018/12/07 Python
python实现小程序推送页面收录脚本
2020/04/20 Python
python 服务器运行代码报错ModuleNotFoundError的解决办法
2020/09/16 Python
Python自动化测试基础必备知识点总结
2021/02/07 Python
遗嘱公证书标准样本
2014/04/08 职场文书
企业优秀团员事迹材料
2014/08/20 职场文书
乡镇党的群众路线对照检查材料
2014/09/24 职场文书
2014年作风建设剖析材料
2014/10/23 职场文书
2014年小学教师工作总结
2014/11/10 职场文书
公司经营目标责任书
2015/01/29 职场文书
导游词之唐山景点
2019/12/18 职场文书
golang协程池模拟实现群发邮件功能
2021/05/02 Golang
分析Java中Map的遍历性能问题
2021/06/26 Java/Android
MySQL视图概念以及相关应用
2022/04/19 MySQL
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技