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下载
您可能感兴趣的文章:
jquery二级导航内容均分的原理及实现
微信的H5页面调用第三方位置导航
基于jQuery实现点击同时更改两个iframe的网址
结构/表现/行为完全分离的选项卡(jquery版和原生JS版)
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
html5 header标签是什么意思?html5 header标签的用法详解(附实例)
php网址导航是什么意思
seo优化内存的得要性及优化方法
怎样增加网站内页权重
jquery 遮罩层效果实现的导航菜单