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语句可以不以;结尾的烦恼
Mar 08 Javascript
script不刷新页面的联动前后代码
Sep 18 Javascript
js识别不同浏览器基于userAgent做判断
Jul 29 Javascript
网页中表单按回车就自动提交的问题的解决方案
Nov 03 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
May 03 Javascript
AngularJs $parse、$eval和$observe、$watch详解
Sep 21 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
Nov 16 Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 Javascript
浅谈js中的this问题
Aug 31 Javascript
详解各版本React路由的跳转的方法
May 10 Javascript
VUE实现密码验证与提示功能
Oct 18 Javascript
vue实现PC端分辨率适配操作
Aug 03 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中可以自动分割查询字符的Parse_str函数使用示例
2014/07/25 PHP
PHP常用工具类大全附全部代码下载
2015/12/07 PHP
php实现scws中文分词搜索的方法
2015/12/25 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
laravel中数据显示方法(默认值和下拉option默认选中)
2019/10/11 PHP
用js实现trim()的解决办法
2013/04/16 Javascript
js使用for循环查询数组中是否存在某个值
2014/08/12 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
2014/10/14 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
jQuery表单插件ajaxForm实例详解
2017/01/17 Javascript
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
bootstrap时间插件daterangepicker使用详解
2017/10/19 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
2017/11/15 Javascript
详解easyui基于 layui.laydate日期扩展组件
2018/07/18 Javascript
Element Input组件分析小结
2018/10/11 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
2019/01/22 Javascript
javascript简单实现深浅拷贝过程详解
2019/10/08 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
2020/03/17 Javascript
Python过滤函数filter()使用自定义函数过滤序列实例
2014/08/26 Python
Python 字典与字符串的互转实例
2017/01/13 Python
python实现微信自动回复功能
2018/04/11 Python
解决Python安装后pip不能用的问题
2018/06/12 Python
python中正则表达式与模式匹配
2019/05/07 Python
用Python实现校园通知更新提醒功能
2019/11/23 Python
利用Python制作动态排名图的实现代码
2020/04/09 Python
配置H5的滚动条样式的示例代码
2018/03/09 HTML / CSS
Guess美国官网:美国知名服装品牌
2019/04/08 全球购物
Linux开机引导的步骤是什么
2015/10/19 面试题
应聘医学检验人员自荐信
2013/09/27 职场文书
仓库班组长岗位职责
2013/12/12 职场文书
大二法英学生职业生涯规划范文
2014/02/27 职场文书
法人代表委托书
2014/04/04 职场文书
法定代表人证明书
2014/11/28 职场文书
芙蓉镇观后感
2015/06/10 职场文书
MySQL 常见存储引擎的优劣
2021/06/02 MySQL