Masonry、ImagesLoaded 和 InfiteAjaxScroll

Question

我在我的页面上使用 Masonry、ImagesLoaded 和 InfinteAjaxScroll 脚本。我不知道如何在此处插入 ImagesLoaded 函数：

var container = document.querySelector('.products');
    var msnry = new Masonry( container, {
      // options
      itemSelector: '.product',
      columnWidth: '.column-sizer',
      percentPosition: true  
    });

var ias = $.ias({
  container: ".products",
  item: ".product",
  pagination: ".woocommerce-pagination",
  next: "a.next",
  delay: 600,
  negativeMargin: $(window).height()
});

ias.on('render', function(items) {
  $(items).css({ opacity: 0 });
});

ias.on('rendered', function(items) {
  msnry.appended(items);
});

ias.extension(new IASSpinnerExtension());
ias.extension(new IASNoneLeftExtension({html: '<div class="ias-noneleft" style="text-align:center"><p><em>You reached the end!</em></p></div>'}));
} );

Masonry 文档页面上的ImagesLoaded 函数示例：

  // init Masonry
var $grid = $('.grid').masonry({
  // options...
});
 // layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
  $grid.masonry('layout');
});

Answer 1

你可以使用：

ias.on('rendered', function(items) {
  msnry.appended(items);
  msnry.masonry('reloadItems');
});

var $container = $('#grid');    
$container.imagesLoaded(function(){
    $container.masonry();
});