第78款插件(二)：jquery.masonry.js实现瀑布流最简使用教程

整理作者：杨红伟  网名：子弹兄   QQ：403236160   如发现本站有任何功能上的问题，请联系作者，谢谢！

一、序言

我们在《第78款插件(一)：jquery.masonry.js实现瀑布流及参数设置和官方案例》已经讲过该插件的参数及官方案例。

但是在实际工作中用到的该插件一般都比较简单，没有那么复杂，越简单的越容易理解，由浅入深来理解，往往最容易事半功倍！

以下是一个瀑布流的一个简单案例。

二：最简使用教程

最简DEMO演示：http://www.ijquery.cn/study/demo/masonry/simple

最简DEMO下载：http://www.ijquery.cn/study/demo/masonry/simple/simple.zip

1、HTML代码

注：以下都注释的，其中class="w1000"是将页面居中的，真正循环的是从<!--item start-->到<!--item end-->，大家把这一循环多做几个，就可以做成瀑布流了！

<div class="w1000">
	<!--瀑布流 start-->
	<div class="item_list infinite_scroll">
		<!--item start-->
		<div class="item masonry_brick">
			<div class="item_t">
				<div class="img"> <a href="#" target="_blank"><img width="210" alt="" src="images/1.jpg" /></a></div>
				<div class="title"><em>T:</em><span><a href="#" target="_blank">这是一个标题</a></span></div>
			</div>
			<div class="item_b clearfix">
				<div class="items_likes fl"> <span>标签: <a href="#">标签1</a> <a href="#">标签2</a> </span> </div>
			</div>
		</div>
		<!--item end-->
	</div>
	<!--瀑布流 start-->
</div>

2、JS代码

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.masonry.js"></script>
<script type="text/javascript">
	$(function(){
		$('.item img').load(function(){ 
			$('.infinite_scroll').masonry({ 
				itemSelector: '.masonry_brick',   // 附加选择器，用来指定哪些元素包裹的元素会重新排列。
				columnWidth:231, // 1列网格的宽度，单位为像素（px），默认： 第一个浮动元素外宽度。
				gutterWidth:19								
			});		
		});
	});
</script>

3、CSS代码

<link rel="stylesheet" href="css/css.css" type="text/css" media="all">

全部代码如下，其中主要的代码相信会CSS的都会的：

@charset "gb2312";
h1, h2, h3, h4, h5, h6, h7, p, ul, ol, dl, dt, dd, li, body, form, input, button, img, cite, strong, em, td, th { padding:0; margin:0;}
h1, h2, h3, h4, h5, h6, h7 { font-size:14px; font-weight:bold;}
img, table, td, th { border:0;}
ul, ol { list-style-type:none; padding:0; margin:0;}
a:link,a:visited { color:#666; text-decoration:none;}
a:hover { color:#000; text-decoration: none;}
body { margin:0; padding:0;color: #666;font: 12px 微软雅黑,tahoma,arial;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-table;}
*html .clearfix{height:1%;}
.clearfix{display:block;}
*+html .clearfix{min-height:1%;}

.fl{float:left;}
.fr{float:right;}

.fl span{ font-weight:normal;}
.fl span a{ margin-left:5px; margin-right:5px;color:#666666;}
.fl span a:hover{color:#999999;}

.w1000{width:1000px;margin:0 auto;}

.item_list{position:relative;padding:0 0 50px;}
.item{width:231px;background:#F0F0F0;overflow:hidden;margin:15px 0 0 0;border: 1px solid #D9D4D4;border-radius:4px 4px 4px 4px;box-shadow:0 1px 3px rgba(34, 25, 25, 0.2);	}
.item_t{padding:10px 8px 0;}
.item_t .img{background-color:#FFFFFF;margin:0 auto;position:relative;width:210px;}
.item_t .img a{display:block;}
.item_t .img a:hover{background:#f5f3f3;}
.item_t .img a:hover img{filter:alpha(opacity=80);-khtml-opacity:0.8;opacity:0.8;-webkit-transition:all 0.3s ease-out;-khtml-transition:all 0.3s ease-out;}
.item_t .title{padding:8px 0;line-height:18px;}
.item_t .title em{ font-style:normal;font-size:15px; font-weight:bolder; color:#2A9CDA;font-family: '黑体',cursive; margin-right:5px;text-shadow: 0 1px 0 #999999;}
.item_t .title span a{ color: #000000; font-weight:500;}
.item_t .title span a:hover{text-decoration:underline;}
.item_b{padding:10px 8px;}
.item_b .items_likes em{line-height:23px;display:block;float:left;padding:0px 6px;color:#FF6699;font-weight:800;border:1px solid #ff6fa6;border-radius:3px;}