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 相关文章推荐
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
Apr 12 Javascript
详解new function(){}和function(){}() 区别分析
Mar 22 Javascript
Jquery 表单取值赋值的一些基本操作
Oct 11 Javascript
javascript学习笔记(三) String 字符串类型介绍
Jun 19 Javascript
密码框显示提示文字jquery示例
Aug 29 Javascript
JavaScript实现页面跳转的几种常用方式
Nov 28 Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
Dec 17 Javascript
jquery精度计算代码 jquery指定精确小数位
Feb 06 Javascript
js编写选项卡效果
May 23 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
Jun 14 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
Sep 14 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
漂亮但不安全的CTB
2006/10/09 PHP
php中用date函数获取当前时间有误的解决办法
2013/08/02 PHP
配置eAccelerator和XCache扩展来加速PHP程序的执行
2015/12/22 PHP
php分页查询的简单实现代码
2017/03/14 PHP
php实现微信分享朋友链接功能
2019/02/18 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
JS解密入门之凭直觉解
2008/06/25 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
2013/01/08 Javascript
javascript检测页面是否缩放的小例子
2013/05/16 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
Function.prototype.apply()与Function.prototype.call()小结
2016/04/27 Javascript
jQuery中delegate()方法的用法详解
2016/10/13 Javascript
基于JS实现的随机数字抽签实例
2016/12/08 Javascript
通过AngularJS实现图片上传及缩略图展示示例
2017/01/03 Javascript
如何理解jQuery中的ajaxSubmit方法
2017/03/13 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
python中使用PIL制作并验证图片验证码
2018/03/15 Python
Django中反向生成models.py的实例讲解
2018/05/30 Python
python之当你发现QTimer不能用时的解决方法
2019/06/21 Python
Python 的字典(Dict)是如何存储的
2019/07/05 Python
详解python中*号的用法
2019/10/21 Python
通过实例解析python描述符原理作用
2020/01/22 Python
在Tensorflow中查看权重的实现
2020/01/24 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
python主要用于哪些方向
2020/07/05 Python
matplotlib基础绘图命令之bar的使用方法
2020/08/13 Python
python全栈开发语法总结
2020/11/22 Python
使用Python制作一个数据预处理小工具(多种操作一键完成)
2021/02/07 Python
css3实现input输入框颜色渐变发光效果代码
2014/04/02 HTML / CSS
美国校园市场:OCM
2017/06/08 全球购物
SNIDEL官网:日本VIVI杂志人气少女第一品牌
2020/03/12 全球购物
建材业务员岗位职责
2013/12/08 职场文书
基层干部十八大感言
2014/01/19 职场文书
金融系毕业生自荐书
2014/07/08 职场文书
大学生党课感想
2015/08/11 职场文书
2019新员工心得体会
2019/06/25 职场文书