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

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

原理:

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. 使用gtest自动化测试并给出性能测试结果(windows 版本,版本平台也可以使用,但并没有做完整的测试)

    /************************************************************* *使用gtest自动化测试 * ********************* ...

  2. 八. 输入输出(IO)操作7.文件的随机读写

    Java.io 包提供了 RandomAccessFile 类用于随机文件的创建和访问.使用这个类,可以跳转到文件的任意位置读写数据.程序可以在随机文件中插入数据,而不会破坏该文件的其他数据.此外,程 ...

  3. java中/与%的区别

    System.out.println(3/5) = 0: System.out.println(2/5) = 0: System.out.println(4/5) = 0: System.out.pr ...

  4. Matlab中find函数陷阱

    a = [ 1 2 3 3  3]; 如果a==3 返回[ 0 0 1  1 1]; find(a==3) 返回[3 4 5],这才是想要的下标.

  5. Nand flash uboot 命令详解

    转:http://blog.chinaunix.net/uid-14833587-id-76513.html nand info & nand device 显示flash的信息: DM365 ...

  6. How to create an IPA (Xcode 5)

    This tutorial will walk you through the easiest way to generate an IPA using Xcode 5. We will be usi ...

  7. [置顶] kubernetes资源类型--secret和Service Account

    secret 概念 secret对象类型主要目的是保存和处理敏感信息/私密数据,比如密码,OAuth tokens,ssh keys等信息.将这些信息放在secret对象中比 直接放在pod或dock ...

  8. 关于RBAC(Role-Base Access Control)的理解

    基于角色的访问控制(Role-Base Access Control) 有两种正在实践中使用的RBAC访问控制方式:隐式(模糊)的方式和显示(明确)的方式. 今天依旧有大量的软件应用是使用隐式的访问控 ...

  9. django发送邮箱

    要用django发送邮箱之前需要在setting中配置一下 EMAIL_HOST = 'smtp.qq.com' EMAIL_PORT = 25 EMAIL_HOST_USER = 'xxx@qq.c ...

  10. log4j教程 2、安装

    Log4j的API包使用Apache软件许可证,由开源倡议认证一个完全成熟的开源许可证下发布. 最新log4j的版本,包括完整的源代码,类文件和文档可以在这里找到 http://logging.apa ...