基于jquery.masonry实现的瀑布流

使用方法：

引入CSS样式、jQuery库文件

<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/lightbox.css" rel="stylesheet" type="text/css" media="screen" />
<script src="js/jquery-1.7.2.min.js"></script>

初始化、配置插件

$(document).ready(function(){	
	$(".zoom,.ilike").hide();
	$(".zoom").each(function(){//遍历所有对象
	var src=$(this).siblings("img").attr("src");
		$(this).attr({href:src});
	});
	
	$("#nav li").click(function(){
		$("#nav a").removeClass("hover");
		$(this).find("a").addClass("hover");
	});
	
	$("#waterfall li").mouseover(function(){
		$(this).addClass("hover");
		$(this).find(".zoom,.ilike").show();
	});
	
	$("#waterfall li").mouseout(function(){
		$(this).removeClass("hover");
		$(this).find(".zoom,.ilike").hide();
	});
});

HTML结构

<ul id="waterfall">
    
    <li>
        <div class="img_block">
            <img src="files/t02a15cce0609367b63.jpg" />
            <a href="#" rel="lightbox[plants]" title="测试标题" class="zoom">放大</a>
            <a href="#" class="ilike">YYM</a>
      	</div>
        <h3>TITLE</h3>
        <div class="iNum"><span>1</span><a href="#">4</a></div>
      	<p>简介文字</p>
    </li>
    
    <li>
        <div class="img_block">
            <img src="files/t02ab3e8234460af10e.jpg" />
            <a href="#" rel="lightbox[plants]" title="测试标题" class="zoom">放大</a>
            <a href="#" class="ilike">YYK</a>
  		</div>
        <h3>标题测试</h3>
        <div class="iNum"><span>1</span><a href="#">4</a></div>
      	<p>简介文字</p>
    </li>
    
    ……
    
</ul>