zoukankan      html  css  js  c++  java
  • 二级导航内容均分--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 < 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下载

  • 相关阅读:
    Shiro【常用的自定义】
    Shiro【重要概念总结】
    Shiro【自定义Realm实战】
    Shiro【内置Realm实操】
    Shiro【快速上手】
    Shiro【初识】
    面向对象【抽象类和接口的区别】
    面向对象【多态中的成员访问特点】
    Kafka2.12-2.5.0在windows环境的安装 启动 通信测试
    CentOS.iso 下载地址收纳整理
  • 原文地址:https://www.cnblogs.com/qd4world/p/menuSort.html
Copyright © 2011-2022 走看看