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');
  }

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

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

Answer 1

这是我的建议：

1º将内容附加到$ container：

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

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

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

3º监控imagesLoaded（）函数的进度 ...＆amp; ...

每次加载图片时，

4º会触发同位素布局功能：

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

将Isotope与imagesLoaded一起使用以加载Ajax内容

1 个答案: