windswaterflow 瀑布流套件

當 Pinterest 帶來瀑布流後就熱門起來了，各種各樣的網站就開始了瀑布流。網路上也又不少 jQuery 的套件，其中比較有名氣的是 Masonry ( http://masonry.desandro.com/ ) 。 windswaterflow 這一個套件也支援 JSON 格式檔案可設定讀取中文字和無字料的文字與對話方塊，也能自行設計每一個方塊的樣板呈現方式與 CSS 樣式等等。

前不久也有介紹過 Masonry 這一個套件 http://blog.fufuk.com/2012/10/masonry.html

使用方法：
第一步 載入程式需要用到的 JavaScript 檔
//使用 Google AJAX API 取得 jQuery 框架 1.8.2 的 min 版本
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
//載入  windswaterflow 的主程式碼
<script type="text/javascript" src="js/jquery.windswaterflow.js"></script>

第二步 在要顯示瀑布流的位置賦予他一個編號或類別
<div class="container"><!--內容將出現在此容器中--></div>
<div id="loading">加載時顯示我……</div>
<div id="noshow">沒資料時顯示我！</div>

第三步 設計 CSS 的樣式表
img{ border:0px; }
.container {position:relative;font-size:12px;border:0px solid green;padding:0;margin:0;text-align:center;}
#loading {margin-top:2px;font-size:12px;border-radius:3px;border:1px solid #ccc;text-align:center;line-height:30px;background: #eee;}
#noshow {margin-top:2px;font-size:12px;border-radius:3px;border:1px solid #ccc;text-align:center;line-height:30px;background: #eee;}
.pin {width:210px;border:1px solid #ccc;border-radius:3px;list-style:none;position:absolute;text-align:center; }
.pin div{ margin:5px;display:block;}
.pin .img{ border:0px solid #eee;}
.pin .btn {position:absolute;border-radius:3px;background: #eee;line-height:20px;width:60px;border:1px solid #ccc;cursor:pointer; display:none;}
.pin .title{ background: #eee;line-height:24px;border:1px solid #ccc;}
.pin .like{ top:8px;left:6px;}
.pin .comments{ top:8px;right:6px;}
.hide {display:none;}

第四步 加入 JavaScript 程式碼
$(function() {
  $(".container").windswaterflow({
itemSelector: '.pin',      // 子元素的選擇器
loadSelector: '#loading',  // 讀取中顯示的元素
noSelector: '#noshow',     // 無資料顯示的文字
boxTemplate: '<div class="pin hide"><a href="#"><div class="img"><img src="{img}" style="height:{height}px;" alt="" /></div></a><div class="title">{title}</div><div class="like btn">喜歡</div><div class="comments btn">評論</div></div>',
        // 每一個盒子的樣板
columnWidth: 210,          // 盒子的寬度設定
marginWidth: 14,           // 盒子寬的間隔距離
marginHeight: 16,          // 盒子高的間隔距離
ajaxServer: 'data.php',    // 資料來源
boxParam: 'num',           // 數量傳送的參數名稱
pageParam: 'page',         // 頁數傳送的參數名稱
maxPage: 0,                // 最大頁數
init: true,                // 自動取得資料
initBoxNumber: 20,         // 自動取得最大數量
scroll: true,              // 滾動取得資料
scrollBoxNumber: 10,       // 滾動取得最大數量
callback: function() {     // 回調函式
 $(".pin").mouseover(function() {
    $(this).find(".btn").show();
}).mouseout(function() {
    $(this).find('.btn').hide();
});
}
  });
});

第五步 寫入伺服器端的檔案 輸出格式為 JSON 以PHP為例
$num = $_GET["num"];   //一次幾筆
$page = $_GET["page"]; //頁數
$data = array();
if($page < 11){
for($i=0;$i<$num;$i++)
{
$pNum=rand(1,44);
$data[$i]["img"] = "images/P".$pNum.".jpg";
$data[$i]["height"] = 0; //无高度值
$data[$i]["title"] = "时间：".date("Y-m-d H:i:s")."<br />".($i+1)."、WindsWaterFlow(第".$page."页)";
}
}
echo json_encode($data);

作者網站：http://www.lijian.net/?p=21
檔案大小：861 KB (包含範例)
檔案下載：http://www.lijian.net/p/windswaterflow/windswaterflow-v1.2.zip
檔案備份：下載