jQuery Masonry 和 Ajax 附加项目

使用 jQuery Masonry 和 Ajax 附加项目

html

javascript
$(document).ready(function() {
  var $container = $('.masonry-container');
  $container.masonry({
    itemSelector: '.masonry-item',
    columnWidth: '.grid-sizer',
    gutter: '.gutter-sizer',
    percentPosition: true
  });
});

javascript
$(document).on('click', '.load-more-button', function() {
  var $button = $(this);
  var $container = $('.masonry-container');
  
  $.ajax({
    url: 'load-more.php',
    type: 'GET',
    dataType: 'html',
    success: function(data) {
      var $items = $(data);
      $container.append($items).masonry('appended', $items);
      
      if ($button.data('page') >= $button.data('total-pages')) {
        $button.hide();
      }
      
      $button.data('page', $button.data('page') + 1);
    }
  });
});

html
  
  
  
  
  
  
    
    
    
Item 1
    
Item 2
    
Item 3
  
  加载更多