同位素砌体/故障，同时使用 ajax 加载更多新项目答案

【问题标题】：Isotope Masonry / Glitch while appending new items with ajax load more同位素砌体/故障，同时使用 ajax 加载更多新项目
【发布时间】：2017-05-24 12:42:40
【问题描述】：

也许有人对我的问题有提示。我和described here on GitHub 有同样的问题，但提供的解决方案在我的情况下不起作用

我有一个同位素砌体网格与infiniteajaxscroll 插件和 imagesloaded 插件相结合。

除了一个问题外，它工作正常：单击“加载更多”按钮后，新项目会出现在页面顶部（与其他内容重叠），然后它们会在正确移动到网格后不久出现。在加载所有内容之前隐藏它们似乎在我的代码中不起作用。

这是我的代码 sn-p，我将不胜感激。我发现的一个快速解决方法是在渲染之前将项目设置为 opacity:0，在我的函数中渲染后设置为 opacity:1。但这也造成了另一个故障，使项目出现的空间闪烁。

$(function(){
var $container = $('.ajax-grid');
$container.isotope({
  itemSelector : '.grid-item'
});

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

    var ias = $.ias({
      container: ".ajax-grid",
      item: ".grid-item",
      pagination: ".ajax-pgn",
      next: ".pagination .next",
      delay: 1200
    });

    ias.on('render', function(items) {
    });

    ias.on('rendered', function(items) {
      var $newElems = $(items).hide();
      $newElems.imagesLoaded(function(){
      $newElems.fadeIn();
      $container.isotope( 'appended', $newElems );
      });
    });

    ias.extension(new IASTriggerExtension({html: 'some html',}));
    ias.extension(new IASSpinnerExtension({html: 'some html', }));
    ias.extension(new IASNoneLeftExtension({html: 'some html',}));
  });

该问题仅在第一次点击/加载时出现。感谢您的帮助！

【问题讨论】：

标签： jquery jquery-isotope imagesloaded jquery-ias

【解决方案1】：

您可能需要在附加项目后对其进行布局。试试下面的代码：

ias.on('rendered', function(items) {
  var $newElems = $(items).hide();
  $newElems.imagesLoaded(function(){
  $newElems.fadeIn();
  $container.isotope( 'appended', $newElems );
 $container.isotope('layout');
  });
});

【讨论】：

非常感谢，我试过了，可惜没有效果。

【解决方案2】：

也许不理想，但这暂时解决了它。我猜隐藏元素无法布局。

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

    ias.on('rendered', function(items) {
      var $newElems = $(items);
      $newElems.imagesLoaded(function(){
      $newElems.css({ opacity: 1 });
      $container.isotope( 'appended', $newElems );
      });
    });

【讨论】：