飞瀑流效果Demo总结（4）之基于jquery+masonry.js的实现
1.综述
最近研究了时下流行的瀑布流展示效果。 当前共计尝试的方法及其优缺点如下：
2基于jquery+jquery.masonry.js的实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery 瀑布流 延时分页加载</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div class="item shadow radius"> <a href='/taobaoke/yifu/14.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-121205193S70-L.jpg' alt='2012秋冬新款 韩版修身纯色大圆领低领 打底衫 女' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/xiezi/33.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-121205214R90-L.jpg' alt=' 美丽说推荐马丁靴明星款擦色打蜡平跟简约短靴' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/xiezi/32.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-121205214K30-L.jpg' alt='欧美明星款超可人兔毛装饰绒面拼接性感内增高' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/yifu/20.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051942400-L.jpg' alt='2012冬装新款 韩版毛领带帽徽章保暖棉衣棉服外套' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/yifu/16.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051940200-L.jpg' alt='2012冬装新款 拼皮口袋显瘦男友风灯芯绒休闲裤' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/xiezi/34.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212052149180-L.jpg' alt='牛仔很忙~瘦版加毛水洗磨白系带牛仔高帮鞋' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/baobao/37.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212052154240-L.jpg' alt='XYS SHOP 复古新款潮流女包 呢绒波士顿包包 潮包包' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/meirong/41.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-121205215I90-L.jpg' alt='Mac家Face And Body奶瓶粉底液 120ml' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/jiaji/40.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-121205215A10-L.jpg' alt='萝莉风-棉麻 办公室抱枕靠垫 汽车靠垫 沙发靠枕' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/peishi/39.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212052156050-L.jpg' alt='彩色贝壳假面 面具 黑色水晶桃心双层毛衣链项链' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/baobao/38.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212052155240-L.jpg' alt='潮人私物优质马毛豹点短款钱包 钱夹卡包零钱包' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/baobao/36.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212052153530-L.jpg' alt='正品包邮 非水版 气质百搭流苏水桶包双肩包三用' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/xiezi/35.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212052149440-L.jpg' alt='贝嫂 韩国 OL气质绒面 高质感 粗高跟防水台 短靴' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/yifu/8.html'><img src='http://demo.iucms.com/taobaoke/uploads/121205/1-121205214614H1.jpg' alt='2012新款甜美公主蕾丝大毛毛修身加厚连帽棉衣外' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/shangpu/31.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051952230-L.png' alt='拍鞋网' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/shangpu/30.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051951590-L.png' alt='银泰网' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/shangpu/29.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051951360-L.png' alt='佑一良品' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/shangpu/28.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051951120-L.png' alt='斯波帝卡' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/shangpu/27.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051950470-L.png' alt='NALA商城' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/shangpu/26.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051950200-L.png' alt='草莓派护肤品商城' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/shangpu/25.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051949560-L.png' alt='乐淘网' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/shangpu/24.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051949350-L.png' alt='库巴购物网' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/shangpu/23.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-121205194Z20-L.png' alt='PBA美妆商城' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/shangpu/22.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-121205194S20-L.png' alt='凡客诚品' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/yifu/21.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051943280-L.jpg' alt='2012秋冬新款蝙蝠袖针织衫韩版英伦镂空套头大码' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/yifu/19.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051942050-L.jpg' alt='lolo2012新款韩版秋冬女装拼接兔绒黑白狐狸毛9分' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/yifu/18.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051941350-L.jpg' alt=' 2012秋冬新款 欧美简约宽松加厚麻花图案女套头' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/yifu/17.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051940550-L.jpg' alt='xixi 优质蝙蝠袖甜美麻花宽松毛衣' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/yifu/15.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051939430-L.jpg' alt='韩国货 超爱自留款 大牌设计款 口袋加厚 羊毛' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/yifu/13.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-121205193Q00-L.jpg' alt='小格格2012秋装 欧美百搭长袖宽松短款短外套 撞' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/yifu/12.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-121205193I40-L.jpg' alt='韩国货 女式 球球宽松毛衣 特特' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/yifu/11.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-121205193A50-L.jpg' alt='bobo家 VIVI羊羔绒大翻领双排扣加厚粗花呢毛呢西' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/yifu/10.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051936090-L.jpg' alt='秋冬款打底裙2012冬装新款女士长袖连衣裙连身裙' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/yifu/9.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051935240-L.jpg' alt='2012秋装新品 韩版加大码 长袖牛仔衬衫女水洗磨' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/yifu/7.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051934040-L.jpg' alt=' TOOK LOOK 2012定制欧美风厚实棉里衬超好品质呢外' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/yifu/6.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051932530-L.jpg' alt='【12.12】KK实拍 韩单 木耳袖子针织衫毛衣' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/yifu/5.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051931450-L.jpg' alt='韩版高品质仿羊羔毛棉大衣 中长款长袖大码圈圈' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/yifu/4.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051930450-L.jpg' alt='【囍家】外贸原单 冬季加厚个性连体怕怕睡衣' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/yifu/3.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051929320-L.jpg' alt=' 初冬新款时尚韩范复古欧美千鸟格蝙蝠宽松套头' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/yifu/2.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-121205192T90-L.jpg' alt='2012秋冬新款韩版女装百搭休闲裤短裤女松紧高腰' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/yifu/1.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-121205192I40-L.jpg' alt='韩国重磅热款 几何多色定型袖口毛衣 A字宽松七' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="clear"></div><div id="page-nav"><a href="2.html">2</a><a href="3.html">3</a><a href="4.html">4</a><a href="5.html">5</a><a href="6.html">6</a></div>
</div>
<script language="JavaScript" type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script language="JavaScript" type="text/javascript" src="js/jquery.masonry.min.js"></script>
<script language="JavaScript" type="text/javascript" src="js/jquery.infinitescroll.js"></script>
<script type="text/javascript" src="js/all.js"></script>
</body>
</html>