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

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

原理:

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. elasticsearch5.3.0 安装

    公司有项目打算用elasticsearch,所以研究了下,目前最新版本5.3.0 安装 1.下载包  https://artifacts.elastic.co/downloads/elasticsea ...

  2. iOS开发 Swift开发数独游戏(四) 游戏界面的界面与逻辑

    一.游戏界面涉及到的功能点 1)数独格子的建模 (1)绘制数独格子要考虑到标记功能 所以要在每个格子内预先塞入9个标记数字,仅数独格子算下来就有9*9*9=729个格子且存在大量嵌套(这导致我在操作S ...

  3. android intent打开各种文件的方法

    android intent打开各种文件的方法   1./**  * 检测是否安装了某个软件  *   * @param pkgName "com.bill99.kuaishua" ...

  4. 为Chrome多账户添加单独的快捷方式

    Chrome的多账户功能非常好用,每个账户都有自己的独立的收藏夹.个人设置等.但是,当你要使用的账户不是默认账户时,必须经过一个切换的操作.本文将简单的介绍一个如何各账户添加快捷方式,从而实现直接登陆 ...

  5. 为什么我不使用Kubernetes的Ingress

    为什么我不使用Kubernetes的Ingress 很不幸,据我所知Kubernetes的文档不是很完美,这就是为什么有很多同学在使用它的时候会遇到很多的坑,Ingress这个组件就是这些坑中的一个. ...

  6. html 打印代码,支持翻页

    ylbtech_html_print html打印代码,支持翻页 <html> <head> <meta name=vs_targetSchema content=&qu ...

  7. GlusterFS分布式文件系统部署

    GlusterFS是一个可伸缩的网络文件系统,使用常见的现成的硬件,您可以创建大型分布式存储流媒体解决方案.数据分析.和其他数据相关的任务.GlusterFS是自由和开源软件. 详细参考官网:http ...

  8. python下性能提示

    性能提示 3.1 嵌套if/else结构比一系列单选if结构块,因为只要有一个条件满足,其余测试就会终止. 3.2 在嵌套if/else结构中,把最可能成立的条件放在该嵌套结构的开始处.和把不常见的条 ...

  9. log4j教程 7、日志记录级别

    org.apache.log4j.Level类提供以下级别,但也可以通过Level类的子类自定义级别. Level 描述 ALL 各级包括自定义级别 DEBUG 指定细粒度信息事件是最有用的应用程序调 ...

  10. zabbix自定义触发器

    zabbix中监控项仅负责收集数据,而通常收集数据的目的还包括在某指标对应的数据超出合理范围时给相关人员发送告警信息,"触发器"正式 用于为监控项所收集的数据定义阈值,每一个触发器 ...