벽돌과 이미지로드 된 무한 스크롤이 잘 작동하지 않습니다. (tumblr)

Question

이전 코드와 새 코드의 조합을 만들었지 만 일부 게시물이 여전히 겹치기 때문에 제대로 작동하지 않습니다. 더 작은 해상도를 위해 겹치지 않을 수도 있으므로 여기 image이고 here 사이트를 볼 수 있습니다.

출처 :

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.0b2.120519/jquery.infinitescroll.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.2/masonry.pkgd.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.0.4/jquery.imagesloaded.min.js"></script> 

및 코드 :

$(window).load(function() { 
    var $container = $('#posts'); 
$container.masonry(), 
$container.infinitescroll({ 
navSelector : "div.navigation", 
// selector for the paged navigation (it will be hidden) 
nextSelector : ".navigation a#next", 
// selector for the NEXT link (to page 2) 
itemSelector : ".entry", 
// selector for all items you'll retrieve 
bufferPx : 10000, 
extraScrollPx: 10000, 
loadingImg : "http://static.tumblr.com/bcpenwm/o5Nmy3k0o/florels.gif", 
loadingText : "<em></em>", 
}, 
// call masonry as a callback. 
    function(newElements) { 
      // hide new items while they are loading 
      var $newElems = $(newElements).css({ opacity: 0 }); 
      // ensure that images load before adding to masonry layout 
      $newElems.imagesLoaded(function(){ 
       // show elems now they're ready 
       $newElems.animate({ opacity: 1 }); 
       $container.masonry('appended', $newElems, true); 
      });} 
); 
}); 

Answer 1

귀하의 코드는 괜찮이 문제는 텀블러의 photoset 변수로 자리 잡고 있습니다. Tumblr은 iframe을 생성하고 석공 술은 공간을 남기고 높이를 잡지 못합니다. 대신 Pixel Union's extended photosets과 같은 것을 사용하십시오. 이것은 이미지로 포토 셋을로드하고 벽돌은 높이를 부여받습니다.

Answer 2

이것은 오래되었지만 광상 및 석조물과 비슷한 문제가 있었으며 chloe의 제안이 효과가 없었습니다. 그러나 또 다른 대안이 있습니다. Tumblr에는 photoset 변수를 실제 사진으로 바꾸는 기능이 있으며 누군가가 격자로 다시 구성 할 수있는 플러그인을 만들었습니다 : Photoset Grid. 이 웹 페이지는 코드를 tumblr 테마로 구현하는 방법에 대한 간단한 자습서를 제공합니다.