Jquery 보조 탐색 콘텐츠의 원리와 구현 Equalization_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 $(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를 나타냅니다

데모 다운로드