WordPress 瀑布流無限加載作為一種另類的分頁方法，在某些布局的網(wǎng)站上，可以加快內(nèi)容加載速度，提升用戶體驗。瀑布流無限加載主題的開發(fā)方法非常簡單，只需要在現(xiàn)有的主題上引入一個 jQuery 插件，增加幾行代碼就可以實現(xiàn)無限加載了。

如果網(wǎng)站的內(nèi)容非常多，一直自動加載下一頁可能會使某些用戶感到迷惑，需要查看網(wǎng)站底部信息的時候，也會非常不方便。這時候我們需要在加載了若干個頁面之后，改變加載方式為手動加載。

首先引入 jQuery Infinite Ajax Loader 插件

因為我們只在某些頁面實現(xiàn)瀑布流無限加載，所以只需要在相應(yīng)的頁面引入這個 jQuery 插件就可以了。這樣可以避免在不必要的頁面引入這個插件對性能造成的影響。Infinite Ajax Loader 是一個商業(yè)插件，但是對個人和非商業(yè)使用是免費的。這里使用的 JS 引入方式是直接寫到模板文件中的，如果你需要分享自己所開發(fā)的主題，建議通過 WordPress 標(biāo)準(zhǔn)的前端資源加載方式，通過 WordPress 的模板判斷標(biāo)簽，也可以實現(xiàn)一樣的效果。

<script type="text/javascript" src="/js/jquery-ias.min.js"></script>

配置 Infinite Ajax Loader 插件實現(xiàn)無限加載

Infinite Ajax Loader 插件的作用就是把普通的分頁 Ajax 化了，所以要使用這個插件，前提是原來的頁面必須要有分頁功能。如果沒有，可以安裝一個 WordPress 分頁插件先把分頁功能加上。如果已經(jīng)有了分頁功能，把下面的代碼直接放到頁面底部，</body> 標(biāo)簽之前就可以了。下面代碼中的各種參數(shù)需要和當(dāng)前使用主題的 HTML 標(biāo)簽匹配一下。

jQuery(document).ready(function ($) {
 var ias = jQuery.ias({
     container: '#cases',
     item: '.case-item',
     pagination: '.pagination',
     next: '.nextpostslink'
 });

 // 添加加載中圖片
 ias.extension(new IASSpinnerExtension());

 // 自動加載3次之后，顯示加載更多的按鈕手動加載下一頁
 ias.extension(new IASTriggerExtension({
     offset: 3,
     text: '加載更多'
 }));

 // 加載完成后，顯示沒有更多了
 ias.extension(new IASNoneLeftExtension({text: "暫時沒有更多了"}));
});

如果一切 OK, 上面代碼實現(xiàn)的效果是，隱藏默認的分頁功能，頁面下拉時，自動加載第二頁，加載了3頁之后，顯示一個“加載更多”的按鈕，所有頁面加載完成之后，顯示“暫時沒有更多了”提示信息。默認情況下，這些信息是以鏈接和文字的方式顯示的，可以根據(jù)你當(dāng)前使用的主題調(diào)整一下樣式。

如果頁面使用了 Masonry 布局，我們還需要結(jié)合一下 Masonry 和 Image loaded 插件來調(diào)整一下無限加載的效果，具體使用方法可以參考官方文檔，在這里就不多說了。