masonry+imagesloaded+AJAX瀑布流套件整合用法-教學撰寫:徐嘉裕Neil hsu

之前寫過一篇【Bootstrap3瀑布流排版用JS套件-Masonry-教學】
https://neohsuxoops.blogspot.com/2019/08/bootstrap3js-masonry.html

不過這方法只能用在已讀出的資料樣板排版上，例如PHP讀出50筆，然後可以用這個方法來做瀑布流排版，但如果要應用在AJAX上則需要再做修改才能應用。

例如像pinterest網站，預設資料只出現幾筆，然後瀏覽器卷軸到底之後又會出現資料，一直循環開啟到資料全部讀完，以AJAX非同步方式求取資料的瀑布流效果。

AJAX結構跟運作原理就不多說了，這裡直接是masonry套件+imagesloaded套件在AJAX中的應用方式，CODE如下。

1、先在樣板裡面引入三支檔

<script src="http://desandro.github.io/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

<script src="js/masonryajaxjs.js"></script> //此為呼叫AJAX的JS檔需自行建立

2、在樣板上貼上以下的function，放在三個引入檔的下方

<script>

function masonryfunction(){

$('.masonry').imagesLoaded(function() {

var msnry = new Masonry(".masonry",{ 

itemSelector: '.item',

columnWidth: <{$enshow.columnWidth}>,   //單個物件寬度

gutter: <{$enshow.gutter}>,   //物件邊距

isFitWidth: true

}); 

//物件觸發後10毫秒執行一次後終止

setTimeout(function(){

msnry.reloadItems();

msnry.layout();

},10);

 });

 }

</script>

3、然後在masonryajaxjs.js的 $.ajax中呼叫 masonryfunction()觸發瀑布流

CODE略................................

$.ajax({
url: blockajax.php',
type: 'POST',
data: { date: $date
},
cache:false,
ifModified :true ,
async:false,
success: function(response) {
if(response=="") return false; //空值終止程式
$("#masonryboxajax").before(response);  //資料附加回傳樣板
masonryfunction(); //觸發瀑布流函式
},

beforeSend:function(){
$('#allrecordsimg').show();
},
complete:function(){
$('#allrecordsimg').hide();
},
error: function() {
console.log('ajax error!');
}
})
}

這樣就OK了，每當response有回傳值就同步觸發masonryfunction(); 瀑布流函式，AJAX所讀取的結構也會自動解析為瀑布流排版樣式，有需要的朋友參考看看!

教學撰寫：徐嘉裕 Neil hsu