jquery二级导航内容均分的原理及实现
jquery二级导航内容均分的原理及实现
发布时间:2016-12-30 来源:查字典编辑
摘要:这个是去年做过的一个项目中的算法,个人感觉还可以,所以拿出来分享下。背景:头部导航二级导航有些内容太长,一列的话太过难看,就要分成两列,要做...

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

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

原理:

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下载

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类