将 Isotope 与 imagesLoaded 一起用于 Ajax 加载的内容答案

【问题标题】：Using Isotope with imagesLoaded for Ajax loaded content将 Isotope 与 imagesLoaded 一起用于 Ajax 加载的内容
【发布时间】：2015-10-21 09:21:55
【问题描述】：

我正在使用 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');
  }

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

有没有人遇到过类似的问题，你是怎么解决的？

【问题讨论】：

你是如何插入项目的，你使用的是isotopes insert吗？这将插入您传递的项目并调用同位素重新布局函数。
我使用的是jquery append方法

标签： javascript jquery ajax

【解决方案1】：

这是我的建议：

1º 将内容附加到 $container：

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

2º调用同位素附加函数：

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

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

4º在每次加载图片时触发同位素layout函数：

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

【讨论】：