用砌体重叠图像答案

【问题标题】：Overlapping Images with Masonry用砌体重叠图像
【发布时间】：2017-03-11 08:21:56
【问题描述】：

我似乎无法让它工作。试图让 tumblr 主题看起来不错，但由于某种原因，其他照片总是加载与垂直照片集重叠。我认为这是因为砌体还没有完成加载垂直照片集，因为它加载了下一个或其他东西......我无法终生修复它（对 jQuery 不太有经验）但我想学习如果有人可以帮助我和/或指出我正确的方向，我将不胜感激！我试过用谷歌搜索这个，我找到了一些答案，但由于某种原因，它们并没有真正帮助我，我仍然有问题。这是我的主题中的内容：

<script type="text/javascript" src="http://static.tumblr.com/bswe8t6/UFVlryaq2/jquerymsnryv2.js"></script>


<script type="text/javascript">

  $(window).load(function(){
    var $wall = $('#posts');
    $wall.imagesLoaded(function(){
      $wall.masonry({
        itemSelector: '#entry, #entry_photo',
        isAnimated : false
      });
    });

    $wall.infinitescroll({
      navSelector    : '#page-nav',  
      nextSelector   : '#page-nav a',
      itemSelector   : '#entry, #entry_photo',
      bufferPx       : 2000,
      debug          : false,
      errorCallback: function() {
        $('#infscr-loading').fadeOut('normal');  
      }},
      function( newElements ) {
        var $newElems = $( newElements );
                $newElems.hide();
        $newElems.imagesLoaded(function(){
          $wall.masonry( 'appended', $newElems,{isAnimated: false}, function(){$newElems.fadeIn('slow');} );
        });
      }); $('#content').show(500);

  });



</script>

最终看起来像this。看到绿色照片下面有一张红色的照片吗？

【问题讨论】：

也许你应该把你链接的图片直接放在你的问题中，因为在这里它不会消失，对于未来查看你问题的人来说，如果链接断开，它不会有帮助。

标签： javascript tumblr masonry

【解决方案1】：

Masonry 和 tumblr 的原生照片集不能很好地协同工作。照片集加载为 iframe，砌体无法计算出高度并为它们留出足够的空间。

相反，您需要使用 Pixel Union photosets (tutorial) 之类的东西。

【讨论】：