Question

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

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

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

这是我的代码段，我将不胜感激任何帮助。我找到的一个快速修复方法是将项目设置为不透明度：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 );
      });
    });

Isotope Masonry / Glitch，同时附加ajax加载的新项目

2 个答案: