jquery二级导航内容均分的原理及实现
时间：2021-02-01 09:54:04|栏目：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下载
背景：头部导航二级导航有些内容太长，一列的话太过难看，就要分成两列，要做到按块尽量均分，排列顺序没有限制。
原理：
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结合PHP+MySQL实现二级联动下拉列表[实例]
栏 目：jquery
下一篇：jQuery DateTimePicker 日期和时间插件示例
本文标题：jquery二级导航内容均分的原理及实现
本文地址：http://www.codeinn.net/misctech/54734.html
