热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

jquery二级导航内容均分的原理及实现

头部导航二级导航有些内容太长,一列的话太过难看,就要分成两列,要做到按块尽量均分,排列顺序没有限制
这个是去年做过的一个项目中的算法,个人感觉还可以,所以拿出来分享下。

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

原理:

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

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

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

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

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

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

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

实现:

当只有一个块时,不用比较
代码如下:

if (arrs.length <= 1) {
$(obj).css({
width : "150px"
});
return;
}

当总高不高于限高时,没有必要分成两列:
代码如下:

if (sum $(obj).css({
width : "150px"
});
return;
}

原理的实现代码:
代码如下:

for (var i = arrs.length - 1; i > -1; i--) {
var _h = $(arrs[i]).height();
if (_h gap = gap - _h;
oldArrs.push(arrs[i]);
} else {
newArrs.push(arrs[i]);
}
}

oldArrs,newArrs代表A,B
demo下载
推荐阅读
  • Python 数据可视化实战指南
    本文详细介绍如何使用 Python 进行数据可视化,涵盖从环境搭建到具体实例的全过程。 ... [详细]
  • 本文详细介绍了 Java 网站开发的相关资源和步骤,包括常用网站、开发环境和框架选择。 ... [详细]
  • 列表生成式虽然简洁高效,但在处理复杂算法时存在局限性。本文将介绍生成器(generator)的概念及其优势,探讨如何通过生成器解决列表生成式的局限性,并提供实际示例。 ... [详细]
  • 本文描述了在使用Bootstrap时遇到的一个常见问题:页面显示为空白。通过详细分析和解决方法,帮助开发者快速定位并解决问题。 ... [详细]
  • 实现了简单的拖拽效果,没有加边界判断。拖动弹窗****param{*}downDiv将鼠标移入时显示移动图标的元素*param{*}moveDiv移动的元素*f ... [详细]
  • 近年来,区块链技术备受关注,其中比特币(Bitcoin)功不可没。尽管数字货币的概念早在上个世纪就被提出,但直到比特币的诞生,这一概念才真正落地生根。本文将详细探讨比特币、以太坊和超级账本(Hyperledger)的核心技术和应用场景。 ... [详细]
  • Java毕业设计项目:“传情旧物”网站(含源码与数据库)
    本项目介绍了如何配置和运行“传情旧物”网站,包括所需的技术栈、环境配置以及具体的操作步骤。 ... [详细]
  • 本文为初学者提供了一条清晰的学习路线,帮助他们逐步成长为优秀的Web开发人员。通过十个关键步骤,涵盖从基础到高级的各个方面,确保每位学习者都能找到适合自己的学习方向。 ... [详细]
  • Gty的二逼妹子序列 - 分块与莫队算法的应用
    Autumn 和 Bakser 正在研究 Gty 的妹子序列,但遇到了一个难题。他们希望计算某个区间内美丽度属于 [a, b] 的妹子的美丽度种类数。本文将详细介绍如何利用分块和莫队算法解决这一问题。 ... [详细]
  • 本文介绍了一种使用CSS3和jQuery实现的35款SVG图标加载动画。这些动画不仅视觉效果出色,还能提升用户体验。通过本文,您可以了解如何在项目中应用这些动画。 ... [详细]
  • Bootstrap 插件使用指南
    本文详细介绍了如何在 Web 前端开发中使用 Bootstrap 插件,包括自动触发插件的方法、插件的引用方式以及具体的实例。 ... [详细]
  • .children() 方法用于获取选中元素的所有直接子元素。此方法仅遍历DOM树的一层,如需遍历多层子元素,请使用 .find() 方法。 ... [详细]
  • 驱动程序的基本结构1、Windows驱动程序中重要的数据结构1.1、驱动对象(DRIVER_OBJECT)每个驱动程序会有唯一的驱动对象与之对应,并且这个驱动对象是在驱 ... [详细]
  • 在 PHP 中,使用 `continue` 关键字结合数字可以有效地终止嵌套的 `foreach` 循环。本文将详细介绍如何使用 `continue` 加数字来控制不同层次的循环。 ... [详细]
  • Java作为全球最流行的编程语言之一,应用广泛。本文将详细介绍Java开发的相关岗位及其具体职责,帮助读者更好地了解这一领域的职业发展路径。 ... [详细]
author-avatar
benpk2702933054
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有