List Item Height

아직 정리 안됐음.

쇼핑몰 상품 리스트와 같이 여러개의 리스트 항목을 표같이 줄단위로 정렬할 때 각 항목의 높이가 다르면 줄이 맞지 않는다. 또한 브라우저마다 클리어(clear)의 구현이 달라서 줄단위로 리스트를 나누고 클리어 시켜줘야 하는 문제가 있다. 이를 해결하기 위해서 줄단위로 모든 항목의 높이를 가장 큰 값으로 조정해 주는 스크립트 이다.

function initListItemHeight(item_per_row) {
	var i = 0, j = 0, k = 0, l = 0, m = 0;

	function getMaxHeight(arr) {
		var arr_count = 0;
		var i = 0;
		var temp_max = 0;

		arr_count = arr.length;
		for (i = 0; i < arr_count; i++) {
			temp_max = Math.max(temp_max, arr[i].offsetHeight);
		}
		return temp_max;
	}

	var els = document.getElementById("M1W-subcontent").getElementsByTagName("ul");
	var list_items = new Array();
	for (m = 0; m < els.length; m++) {
		if (els.item(m).className != "section") {
			continue;
		}

		var lists = els.item(m).childNodes;
		l = 0;
		for (k = 0; k < lists.length; k++) {
			if (lists.item(k).tagName == "LI") {
				list_items[l++] = lists.item(k);
			} else {
				continue;
			}
		}
		//*
		for (i = 0; i < list_items.length - 1; i = i + item_per_row) {
			var maxHeight = 0;
			j = 0;
			k = 0;
			var line = new Array();

			for (j = 0; j < item_per_row; j++) {
				if (list_items[i + j]) {
					line[j] = list_items[i + j];
				}
			}
			maxHeight = getMaxHeight(line);
			for (k = line.length; k > 0; k-- ) {
				list_items[i + k - 1].style.height = maxHeight + "px";
			}
		}
		//*/
	}
}
initListItemHeight(3);