最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

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

来源:动视网 责编:小采 时间:2020-11-27 21:12:53
文档

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

jquery二级导航内容均分的原理及实现_jquery:这个是去年做过的一个项目中的算法,个人感觉还可以,所以拿出来分享下。 背景:头部导航二级导航有些内容太长,一列的话太过难看,就要分成两列,要做到按块尽量均分,排列顺序没有。 原理: 1.把各个二级导航做为一个的,内部分成多个块,算出各块
推荐度:
导读jquery二级导航内容均分的原理及实现_jquery:这个是去年做过的一个项目中的算法,个人感觉还可以,所以拿出来分享下。 背景:头部导航二级导航有些内容太长,一列的话太过难看,就要分成两列,要做到按块尽量均分,排列顺序没有。 原理: 1.把各个二级导航做为一个的,内部分成多个块,算出各块


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

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

原理:

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二级导航内容均分的原理及实现_jquery

jquery二级导航内容均分的原理及实现_jquery:这个是去年做过的一个项目中的算法,个人感觉还可以,所以拿出来分享下。 背景:头部导航二级导航有些内容太长,一列的话太过难看,就要分成两列,要做到按块尽量均分,排列顺序没有。 原理: 1.把各个二级导航做为一个的,内部分成多个块,算出各块
推荐度:
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top