js精彩图片瀑布流布局

js精彩图片瀑布流布局220
function G(s){
	return document.getElementById(s);
}
var c1 = c2 = c3 = c4 = min = max = h = 0, 
	w = 253, 
	picList = G("picList"), 
	html = "", 
	css,
	obj,
	len;

function setList(startNum,entNum){
	len = picList.getElementsByTagName("li").length;
	for(var i = startNum; i < entNum; i++){
		obj = G("listItem"+(i+1));
		min = Math.min(c1, c2, c3, c4);
		css = obj.style;
		css.top = min + "px";
		h = obj.offsetHeight;
		if(c1 == min){
			css.left = 0;
			c1 += h;
		}else if(c2 == min){
			css.left = w + "px";
			c2 += h;
		}else if(c3 == min){
			css.left = w * 2 + "px";
			c3 += h;
		}else if(c4 == min){
			css.left = w * 3+ "px";
			c4 += h;
		}
		css.visibility = "visible";
	}
	max = Math.max(c1, c2, c3, c4);
	picList.style.height = max + "px";
}

setList(0,14);

也许你还喜欢