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'><i
