使用jq实现瀑布流闭包-2

继续上一次的瀑布流，这次贴代码，代码很简单的，各位一看就能懂

css：

li{ list-style-type:none;}

.box{position:relative; width:auto; height:auto;} 
.listBox li{width:210px; height:auto;}
.top_page{ width:180px; height:auto; padding:5px 0 5px 15px;}
.top_page img{width:180px;}
.botton_page{ width:180px; height:auto; text-align:center; margin:5px 0 0 15px; padding-top:5px; border-top:#999 1px solid;}
.botton_page span{width:180px; color:#999; font-size:12px;}
.top{background:url("./images/top_01.png") no-repeat; width:210px; height:18px;}
.cen{background:url("./images/center_01.png"); width:210px; text-align:center; height:auto;}
.bottom{background:url("./images/bottom_01.png") no-repeat; width:210px; height:18px;}

html：

<div id="box" class="box">
	<ul class="listBox" id="listBox">
    	<li>
        	<div class="top"></div>
        	<div class="cen">
        	<div class="top_page">
        		<img src="images/P20915-101428.jpg" />
            </div>
            <div class="botton_page"><span>山外青山楼外楼山外青</span></div>
            </div>
            <div class="bottom"></div>
        </li>
        <li>
        	<div class="top"></div>
        	<div class="cen">
        	<div class="top_page">
        		<img src="images/P20915-101428.jpg" />
            </div>
            <div class="botton_page"><span>山外青山楼外楼山外青山楼外楼山外楼山外青山楼外楼</span></div>
            </div>
            <div class="bottom"></div>
        </li>
</ul>

初始化js代码：

window.onload = function(){
	$("#listBox").Waterfall();
 	window.onresize = function(){
		$("#listBox").Waterfall();
	}
}

瀑布流闭包代码：

(function($){
	$.fn.Waterfall = function(options){
		var box = $(this);
		var parent = box.parent();
		var list = box.find("li");
		var maxSizeOnRow = 0;
		if(list){
			//获取一行能摆放li的数量
			maxSizeOnRow = Math.floor((parseInt(document.documentElement.clientWidth)) / parseInt($(list[0]).width())) - 1; 
			$(parent).width(maxSizeOnRow*($(list[0]).width()+20));
		}else{ //获取不到列表返回
			return false;
		}
		
		//初始化
		var socal ={
			init:function(){
				var num = 0, pre = 0;
				var $item = null;
				var width = $(list[0]).width();
				$(parent).css({
					left:(parseInt(document.documentElement.clientWidth) - maxSizeOnRow*($(list[0]).width()+20))/2
				});
				$(list).each(function(i){
					
					$item = $(this);
					
					if(!list[i-1]){ //如果是第一个
						$item.css({
							position:"absolute",
							top:10,
							left:20
						});
					}else{
						num = i - maxSizeOnRow;
						pre = (i%maxSizeOnRow)*(width + 20);
						if(i % maxSizeOnRow == 0) pre = 0;
						if(!list[num]){
							$item.css({
								position:"absolute",
								top:10,
								left:20 + pre,
							});
						}else{
							$item.css({
								position:"absolute",
								top:10 + parseFloat($(list[num]).height()) + parseFloat($(list[num]).css("top")) ,
								left:20 + pre,
							});
						}
					}
				});
			}
		};
		socal.init()
	}
}(jQuery));

实现的页面效果：

这个闭包写的比较简单，可以扩展的内容还是挺多的，比如把排列的初始top、left值作为参数传进来、进入页面的效果还有将窗口变化的是改变显示行数的功能也放入闭包中等等。