加载的图像不适用于 Infinite Ajax Scroll 和 Masonry

Question

我有一个网站，使用 bootstrap 和我用砌体创建的新闻，我使用了无限 Ajax 滚动，它调用不同 div 中的其他新闻预设值。然而，很多时候，如果快速滚动页面，或者如果你的连接速度很慢，元素就会重叠并且不会 return 到他们的位置，我认为这是因为它无法加载图片。我试图整合 Imagesloaded 但它似乎无法正常工作......我不知道该怎么做...... 这是我进行时的来源， HTML:

<div class="row masonry_base altre">
  {$news}
</div>

<div class="row masonry altre">
  <div class="col-lg-4 col-md-6 col-xs-12 post-grid">
    {$news_scroll}
  </div>
</div>

JS:

<script>
(function($) {
"use strict";

  var $container = $('.masonry_base');
  $($container).imagesLoaded( function(){
    $($container).masonry({
      itemSelector: '.post-grid',
      columnWidth: '.post-grid'
    });
  });
})(jQuery);
</script>

<script type="text/javascript">
  var container = document.querySelector('.masonry');
  var msnry = new Masonry( container, {
    itemSelector: '.post-grid',
        gutterWidth: 20
  });
msnry.reloadItems()
    var $container = $('.masonry');
    $($container).imagesLoaded( function(){
        $($container).masonry({
            itemSelector: '.post-grid',
            columnWidth: '.grid',
            gutterWidth: 20
        });
    });


  var ias = $.ias({
    container: ".masonry",
    item: ".post-grid",
    pagination: "#pagination",
    next: ".next a",
    delay: 1200
  });

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

  ias.on('rendered', function(items) {
    msnry.appended(items);
  });

  ias.extension(new IASSpinnerExtension());
  ias.extension(new IASNoneLeftExtension({
        html: '<div class="btn btn-info btn-block btn-icon-left ias-noneleft" style="text-align:center"><p><em>No news</em></p></div>'
    }));
</script>

Answer 1

此代码：

$($container).imagesLoaded( function(){
    $($container).masonry({
        itemSelector: '.post-grid',
        columnWidth: '.grid',
        gutterWidth: 20
    });
});

仅将 imagesLoaded 应用于任何 $container 恰好在执行时。它不适用于动态添加的内容。您应该再次调用此函数以添加动态内容。也许在你的 rendered 回调中。

此外，您应该在图片加载后调用msnry.layout()调整内容（不需要再次调用$.masonry）

希望对您有所帮助

加载的图像不适用于 Infinite Ajax Scroll 和 Masonry

Imagesloaded not working with Infinite Ajax Scroll and Masonry

javascript

masonry

imagesloaded