二级导航内容均分--jquery
这个是去年做过的一个项目中的算法,个人感觉还可以,所以拿出来分享下。
背景:头部导航二级导航有些内容太长,一列的话太过难看,就要分成两列,要做到按块尽量均分,排列顺序没有限制。
原理:
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
二级导航内容均分--jquery的更多相关文章
- jQuery制作右侧边垂直二级导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 一款jquery编写图文下拉二级导航菜单特效
一款jquery编写图文下拉二级导航菜单特效,效果非常简洁大气,很不错的一款jquery导航菜单特效. 这款jquery特效适用于很多的个人和门户网站. 适用浏览器:IE8.360.FireFox.C ...
- jQuery垂直二级导航菜单代码
http://www.sucaihuo.com/js/395.html 分享一个简单的垂直二级菜单导航. HTML <div id="my_menu" class=&qu ...
- 用jquery制作一个二级导航下拉菜单
1使用$(function(){...})获取到想要作用的HTML元素. 2通过使用children()方法寻找子元素. 3通过使用show()方法来显示HTML元素. 4通过 ...
- 一款基于jquery和css3的响应式二级导航菜单
今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览 源码下载 实现的代码. ...
- jQuery实现页面导航内容定位效果,并支持内容切换
需求 页面向下滚动时,需要将顶部的搜索栏信息和导航菜单吸顶,并且,搜索栏信息和导航菜单之间可以切换. 效果 https://www.iguopin.com/index.php?m=&c=ind ...
- jquery-menu-aim插件实现二级导航
jquery-menu-aim插件是实现二级导航亚马逊式三角滑动的强力工具,它在性能上极佳,快速滑动,基本无延迟效果,源码位置见对应作者的github,接下来附上样例代码: $(function () ...
- vue高亮一级、二级导航
使用vue开发过程中有的项目会存在多级导航的情况,如下图,这种就存在了两层,那么该如何高亮一级导航,又该如何高亮二级导航这就是今天我要记录的内容. 1.高亮一级导航很简单,代码如下: // 点击一级导 ...
- 推荐一个内容滚动jquery插件
myslider是一个内容滚动jquery插件,版本0.1.2的每次滚动内容是一行内容,可以是文字,可以是一个链接,还可以是图片. 官方网址:http://keleyi.com/jq/myslider ...
随机推荐
- 使用gtest自动化测试并给出性能测试结果(windows 版本,版本平台也可以使用,但并没有做完整的测试)
/************************************************************* *使用gtest自动化测试 * ********************* ...
- 八. 输入输出(IO)操作7.文件的随机读写
Java.io 包提供了 RandomAccessFile 类用于随机文件的创建和访问.使用这个类,可以跳转到文件的任意位置读写数据.程序可以在随机文件中插入数据,而不会破坏该文件的其他数据.此外,程 ...
- java中/与%的区别
System.out.println(3/5) = 0: System.out.println(2/5) = 0: System.out.println(4/5) = 0: System.out.pr ...
- Matlab中find函数陷阱
a = [ 1 2 3 3 3]; 如果a==3 返回[ 0 0 1 1 1]; find(a==3) 返回[3 4 5],这才是想要的下标.
- Nand flash uboot 命令详解
转:http://blog.chinaunix.net/uid-14833587-id-76513.html nand info & nand device 显示flash的信息: DM365 ...
- 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 ...
- [置顶]
kubernetes资源类型--secret和Service Account
secret 概念 secret对象类型主要目的是保存和处理敏感信息/私密数据,比如密码,OAuth tokens,ssh keys等信息.将这些信息放在secret对象中比 直接放在pod或dock ...
- 关于RBAC(Role-Base Access Control)的理解
基于角色的访问控制(Role-Base Access Control) 有两种正在实践中使用的RBAC访问控制方式:隐式(模糊)的方式和显示(明确)的方式. 今天依旧有大量的软件应用是使用隐式的访问控 ...
- django发送邮箱
要用django发送邮箱之前需要在setting中配置一下 EMAIL_HOST = 'smtp.qq.com' EMAIL_PORT = 25 EMAIL_HOST_USER = 'xxx@qq.c ...
- log4j教程 2、安装
Log4j的API包使用Apache软件许可证,由开源倡议认证一个完全成熟的开源许可证下发布. 最新log4j的版本,包括完整的源代码,类文件和文档可以在这里找到 http://logging.apa ...