这个是去年做过的一个项目中的算法,个人感觉还可以,所以拿出来分享下。

背景:头部导航二级导航有些内容太长,一列的话太过难看,就要分成两列,要做到按块尽量均分,排列顺序没有限制。

原理:

1.把各个二级导航做为一个独立的,内部分成多个块,算出各块的高度,升序排列。

2.求出各块的总高度和,除2得到平均最高的高度。

3.从块的高度最高的开始,如果高度大于平均高度,则这块放入A边,其他的分至B边。

4.如果小于这个高度,则平均高度变为减去最高高度的值。

5.取剩下最高的高度与平均高度比,如果高度大于平均高度,则这块放入A边,其他的分至B边。

6.循环3-5直到所有块都结束。

这是这个代码的主要思路,这样就把一个导航的内容分成了平均的两列。

实现:

当只有一个块时,不用比较

if (arrs.length <= ) {
$(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下载

二级导航内容均分--jquery的更多相关文章

  1. jQuery制作右侧边垂直二级导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 一款jquery编写图文下拉二级导航菜单特效

    一款jquery编写图文下拉二级导航菜单特效,效果非常简洁大气,很不错的一款jquery导航菜单特效. 这款jquery特效适用于很多的个人和门户网站. 适用浏览器:IE8.360.FireFox.C ...

  3. jQuery垂直二级导航菜单代码

    http://www.sucaihuo.com/js/395.html 分享一个简单的垂直二级菜单导航.   HTML <div id="my_menu" class=&qu ...

  4. 用jquery制作一个二级导航下拉菜单

    1使用$(function(){...})获取到想要作用的HTML元素. 2通过使用children()方法寻找子元素.       3通过使用show()方法来显示HTML元素.       4通过 ...

  5. 一款基于jquery和css3的响应式二级导航菜单

    今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览   源码下载 实现的代码. ...

  6. jQuery实现页面导航内容定位效果,并支持内容切换

    需求 页面向下滚动时,需要将顶部的搜索栏信息和导航菜单吸顶,并且,搜索栏信息和导航菜单之间可以切换. 效果 https://www.iguopin.com/index.php?m=&c=ind ...

  7. jquery-menu-aim插件实现二级导航

    jquery-menu-aim插件是实现二级导航亚马逊式三角滑动的强力工具,它在性能上极佳,快速滑动,基本无延迟效果,源码位置见对应作者的github,接下来附上样例代码: $(function () ...

  8. vue高亮一级、二级导航

    使用vue开发过程中有的项目会存在多级导航的情况,如下图,这种就存在了两层,那么该如何高亮一级导航,又该如何高亮二级导航这就是今天我要记录的内容. 1.高亮一级导航很简单,代码如下: // 点击一级导 ...

  9. 推荐一个内容滚动jquery插件

    myslider是一个内容滚动jquery插件,版本0.1.2的每次滚动内容是一行内容,可以是文字,可以是一个链接,还可以是图片. 官方网址:http://keleyi.com/jq/myslider ...

随机推荐

  1. response.getWriter().write()与out.print()的区别(转)

    1.首先介绍write()和print()方法的区别: (1).write():仅支持输出字符类型数据,字符.字符数组.字符串等 (2).print():可以将各种类型(包括Object)的数据通过默 ...

  2. SQL表操作

    //创建一个名为TEST1的表空间 CREATE SMALLFILE TABLESPACE "TEST1" DATAFILE 'G:\ORACLE_11G\ORADATA\ORCL ...

  3. iOS isa 浅析

    看见一到面试题讲述一下Objective-C中的isa?完全没听说过,打算小研究一下. 参考:http://blog.sina.com.cn/s/blog_7a2ffd5c01010nme.html ...

  4. OC语言基础之函数与方法

    方法 1.对象方法都是以减号 - 2.对象方法的声明必须写在@interface和@end之间    对象方法的实现必须写在@implementation和@end之间 3.对象方法只能由对象来调用 ...

  5. UBIFS

    转:http://www.armadeus.com/wiki/index.php?title=UBIFS This is a preliminary page dealing with the ins ...

  6. VMware Server中虚拟机随宿主机自动启动

    在options页面, 开启 Start Up and Shut Down Virtual Machines 这个选项. 保存退出. 打开 VMWare Server Console, 打开需要自动启 ...

  7. vue的表单的简单介绍 input radio checkbox等表单特性

    在vue中我们可以通过v-model来为表单元素实现双向绑定 1:v-model指令 数据的双向绑定 双向绑定是说我们不仅仅可以通过数据(M)的改变去影响视图(V),还是当视图的内容改变(V)去影响模 ...

  8. STL 源码分析 (SGI版本, 侯捷著)

    前言 源码之前,了无秘密 algorithm的重要性 效率的重要性 采用Cygnus C++ 2.91 for windows cygwin-b20.1-full2.exe 下载地址:http://d ...

  9. object-c 框架之经常使用结构体

    Foundation 框架定义经常使用结构体.结构体採用object-c 定义:经常使用NSSRange,NSPoint.NSSize,NSRect等 一.NSRange 创建范围结构体. 方法:NS ...

  10. python pip install error

    使用pip install的时候报错 解决方法是使用如下的命令进行安装 python -m pip install sqlalchemy 升级pip的命令python2 -m pip install ...