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>
