0

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

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

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

这是我的代码片段，我将不胜感激。我发现的一个快速解决方法是在渲染之前将项目设置为 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',}));
  });

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

4

2 回答 2

0

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

ias.on('rendered', function(items) {
  var $newElems = $(items).hide();
  $newElems.imagesLoaded(function(){
  $newElems.fadeIn();
  $container.isotope( 'appended', $newElems );
 $container.isotope('layout');
  });
});
于 2017-05-26T01:17:31.027 回答
0

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

    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 );
      });
    });
于 2017-05-28T11:09:02.230 回答