Question

我正在使用Masonry和ImagesLoaded来准备网格布局，其中网格中的每个项目都是动态添加的图像。此外，还使用无限滚动来滚动后续页面中的项目（不是手动触发）。下面提供了网格项的结构。

<article class="entry">
  <a href="#" class="thumbnail-wrap">

  </a>
  <div class="entry-body">
   <div class="photo-wrap">
    <img src="..." alt="...">
   </div>
   <div class="photo-wrap">
    <img src="..." alt="...">
   </div>
   <div class="photo-wrap">
    <img src="..." alt="...">
   </div>
  </div>
</article>

通过CSS隐藏<div class="entry-body"></div>。第一个图像通过JS在“thumbnail-wrap”容器中添加。为了防止在通过Infinite Scroll加载新内容时使网格失去平衡，首先隐藏新加载的元素，然后将图像动态添加到“thumbnail-wrap”中，然后将项目附加到Masonry，之后元素为所示。下面是无限滚动回调中使用的JS代码。

function(newElements){
  var $newElems = $( newElements ).css({
    opacity: 0
  });
  $newElems.imagesLoaded(function(){
    // The first image being added
    $newElems.each( function() {
      var thumbnailImage = $(this).find('.entry-body .photo-wrap:first-child').html();
      $(this).find(".thumbnail-wrap").append(thumbnailImage);
    });
    // Newly loaded elements being appended
    $grid.masonry( 'appended', $newElems, { // var $grid = $('#content');
      isAnimated: false
      }, function(){
        $newElems.animate({
          opacity: 1
      });
    });
  });

通过物理放置代码以在将它们附加到砌体之前动态添加图像我试图防止项目的过度重叠。 我的问题是，如果这是解决问题的最有效方法，还是有任何解决方案比现在使用的解决方案更优化？

我们将非常感谢您对此事的任何澄清。谢谢！

将动态加载的项目附加到砌体的最佳流程

0 个答案: