jQuery 瀑布流Masonry + 動態載入Infinite Scroll

目前的前端介面常見的排版之一

就是瀑布流的排版，但瀑布流就是資料量多排起來才好看

所以通常瀑布流還會再搭配動態載入資料的功能。

1. 瀑布流Masonry

先至Masonry網站下載js檔

(參考連結：https://masonry.desandro.com/)

於網頁中加入，現在主流Script放法都是於網頁末端

<script src="{依網站路徑}/masonry.pkgd.min.js"></script>

2. 動態載入Infinite Scroll

可至Infinite Scroll下載檔案
(參考連結：https://infinite-scroll.com/)

加入

<script src={依網站路徑}/jquery.infinitescroll.min.js></script>

3. 圖片載入檢查 imagesLoaded

因為動態載入進來，可能圖片尚未載入完全
這時就進行瀑布流的排版，很可能會造成item的重疊 (因為未計算到圖片高度)
這時就需要imagesLoaded來做處理

一樣先至官網下載需要檔案
(參考連結：https://imagesloaded.desandro.com/)

加入

<script src={依網站路徑}/imagesloaded.pkgd.min.js></script>

4. jQuery處理

其實最後重點就在設定瀑布流的時候，先加入imagesLoaded的處理，
Infinite Scroll時利用function(newElements)...執行完成載入動作，一樣加入imagesLoaded處理再進行Masonry，這樣就能避免重疊跑版問題發生。

<script>
$(document).ready(function() {
/** 滾動載入 **/
  
    $('.infinite_div').infinitescroll({
 navSelector: 'div.infinite_Link',
 nextSelector: 'div.infinite_Link a:first',
 itemSelector: '.infinite_div div.flow_square',
    },
    function(newElements) {
 $('.infinite_div').imagesLoaded( function() {
     $('.infinite_div').masonry('appended', newElements, true); 
 });
    });
  
/** 瀑布流布局 **/
  
    $('.grid').imagesLoaded( function() {
 $('.grid').masonry({
     itemSelector: '.grid-item',
     horizontalOrder: true
 });
    });
}
</script>