javascript - 使用 Isotope 和 imagesLoaded 来处理 Ajax 加载的内容

Question

我使用 Isotope 创建砖石网格，并且实现了一个加载更多按钮，当使用 AJAX 单击时可以获取更多项目。

在我的 AJAX 成功函数中，我为网格项创建所需的 html，如下所示:

 htm = '';
 htm+= '<div class="item">';
 htm+= '<img src="' + imgSrc  + '">';
 htm+= '</div>';

之后，我将元素附加到容器并调用 redo_isotope 函数

$container.append(htm);
redo_isotope()

我的 redo_isotope 函数:

  var $container = $('.grid');
  function redo_isotope(){
     $container.imagesLoaded( function(){
       $container.isotope({
         itemSelector: '.grid-item',
         transitionDuration:0,
         masonry: {
          gutter:15
         },
       });
     });
    $container.isotope().isotope('reloadItems');
  }

在大多数情况下，这使得新附加的项目在页面上很好地布局，而不会导致任何重叠问题，但在某些情况下，imageLoaded 函数似乎无法正确触发，导致附加项目的高度计算错误而被切断。

有人遇到过类似的问题吗？在这种情况下你是如何解决的？

Answer 1

这是我的建议:

1º将内容附加到$container:

var htm = '<div class="item"><img src="' + imgSrc  + '"></div>';
$container.append( $(htm) );

2°调用同位素附加函数:

$container.isotope( 'appended', $(htm) );

3° 监控 imagesLoaded() 函数的进度 ... & ...

4°每次加载图像时都会触发同位素布局功能:

$container.imagesLoaded().progress(function(){
    $container.isotope( 'layout' );
});