同位素砌体/故障，同时附加带有 ajax 加载的新项目更多

Question

也许有人对我的问题有提示。我遇到了与GitHub上描述的相同的问题，但是提供的解决方案在我的情况下不起作用

我有一个同位素砌体网格与无限贾克斯滚动插件和图像加载插件相结合。

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

这是我的代码片段，我将不胜感激任何帮助。我发现的一个快速解决方法是将项目设置为不透明度：0渲染前和不透明度：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',}));
  });

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

Answer 1

您可能需要在

追加项目后对其进行布局。请尝试以下代码：

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

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