jQuery Masonry 瀑布流實作與 ThinkPHP 整合完整範例

瀑布流佈局廣泛應用於圖片牆、商品展示等場景。本文提供一個結合 jQuery Masonry 與 ThinkPHP 的完整前後端實作範例，包含無限滾動載入、動畫效果與資料渲染。

核心邏輯流程

1. 頁面初始化載入第一批資料
2. 偵測滾動至頁面底部
3. AJAX 請求後端獲取更多資料
4. 動態新增元素並觸發 Masonry 重新佈局
5. 重複直到無更多資料

前端關鍵程式碼結構

<div id="container" class="container">
  <volist name="height" id="vo">
    <div class="item" style="height:{$vo}px;">內容</div>
  </volist>
</div>
<div id="loading" class="loading-wrap"><span class="loading">載入中...</span></div>

JavaScript 關鍵邏輯

var $container = $('#container');
$container.masonry({ itemSelector: '.item', isAnimated: true });

$(window).scroll(function(){
  if(loading.data("on")) return;
  if($(document).scrollTop() > $(document).height() - $(window).height() - $('.footer').height()){
    loading.data("on", true).fadeIn();
    $.get("getMore", function(data){
      // 渲染新元素、動畫顯示、masonry appended
      loading.data("on", false).fadeOut();
    }, "json");
  }
});

ThinkPHP 後端配合

控制器需提供 getMore 方法回傳 JSON 格式高度陣列，搭配模板輸出初始資料。完整程式碼包含 CSS 樣式、jQuery 1.7.2、Masonry 插件引用，可直接部署測試。