jQuery Masonry是一款流式布局插件,可以將不同大小的元素自動排列成網格狀布局。通過使用Ajax,我們可以動態地加載元素并將其添加到Masonry布局中。
$.ajax({
url: 'url',
dataType: 'json',
success: function(data) {
// 處理數據
var items = '';
$.each(data, function(i, item) {
items += '' + item.content + '';
});
// 添加到布局中
var $container = $('.grid');
$container.append(items);
$container.imagesLoaded(function() {
$container.masonry('appended', $(items));
});
}
});
以上代碼中,我們首先使用$.ajax函數向服務器發送請求并獲取返回的數據。在success回調函數中,我們將數據處理成一個字符串,并通過jQuery的each方法循環生成每一個元素的HTML代碼。
接下來,我們將所有生成的元素添加到Masonry布局的容器中,并調用imagesLoaded插件確保所有圖片都已加載完成后再使用masonry的appended方法添加元素到布局中。
這樣,我們就可以通過Ajax動態地向Masonry布局中添加元素,實現更加靈活的布局效果。