jQuery 瀑布流插件對接數據庫：動態加載、分頁與 Wookmark/自定義插件改造

核心問題

現有插件一次性渲染所有 <li>，滾動底部僅 克隆前 10 項循環顯示，非真正的數據庫分頁加載。

解決方案：改造插件支持 getResource 回調

優秀瀑布流插件 (如文中提供的 $.waterfall) 內建 getResource(index, renderCallback) 接口，只需實現該函數即可實現真正的無限滾動加載。

完整改造步驟

1. 後端分頁接口 (Java/Spring Boot 示例)

@GetMapping("/api/items")
public PageResult list(@RequestParam(defaultValue = "1") int page,
                             @RequestParam(defaultValue = "10") int size) {
    Page p = itemRepository.findAll(PageRequest.of(page - 1, size));
    return new PageResult<>(p.getContent(), p.getTotalPages(), p.getTotalElements());
}

2. 前端配置插件

<div id="waterfall"></div>

<script>
var totalPages = 1; // 從後端獲取總頁數，或首次加載時賦值

function getResource(pageIndex, renderCallback) {
    // pageIndex 從 0 開始，頁碼 = pageIndex + 1
    if (pageIndex + 1 > totalPages || window.loading) return false;
    window.loading = true;
    $('#loading').show();

    $.ajax({
        url: '/api/items',
        data: { page: pageIndex + 1, size: 10 },
        dataType: 'json',
        success: function(res) {
            totalPages = res.totalPages; // 更新總頁數
            var html = '';
            res.data.forEach(function(item) {
                html += '<li class="item"><img src="' + item.imgUrl + '" /><p>' + item.title + '</p></li>';
            });
            renderCallback($(html)); // 關鍵：調用插件提供的渲染回調
        },
        complete: function() {
            window.loading = false;
            $('#loading').hide();
        }
    });
}

$('#waterfall').waterfall({
    column_width: 240,
    column_space: 10,
    cell_selector: '.item',
    auto_imgHeight: true,
    fadein: true,
    getResource: getResource // 掛載動態加載函數
});
</script>

3. 插件內部渲染邏輯關鍵點 (供參考)

// 插件內部滾動監聽
function onScroll() {
    if (nearBottom()) {
        var $newElems = getElements(); // 內部調用 getResource
        if ($newElems) render($newElems, true); // fadein=true
    }
}

// getResource 返回元素或調用回調
function getElements() {
    waterfall.load_index++;
    return setting.getResource(waterfall.load_index, public_render);
}

// public_render 由插件提供，內部調用 render()
function public_render(elems) {
    render(elems, true);
}

若當前插件不支持動態加載 (如 Wookmark)

1. 更換插件：直接使用文中提供的 $.waterfall 或 Infinite Scroll + Masonry 組合。
2. 手動掛載滾動事件 (不推薦，易出 Bug)：

   $(window).scroll(function() {
       if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
           loadNextPage(); // 自己寫 AJAX、append、重新 layout
           $('#tiles').wookmark(options); // 重新佈局
       }
   });
   

性能優化清單

• 圖片懶加載：loading="lazy" 或 IntersectionObserver。
• 虛擬列表：數據量 > 500 時，移除可視區外 DOM (如 react-virtualized 思路)。
• 防抖/節流：滾動事件 setTimeout 300ms。
• 預加載下一頁：當滾動到 80% 時預請求，減少等待。

總結

瀑布流核心在於「佈局引擎」與「數據源」分離。選擇支持 getResource(renderCallback) 模式的插件，後端提供標準分頁接口，前端僅負責模板渲染與回調調用，即可實現真正的數據庫驅動無限滾動。