石積みと画像読み込みが無限に動作する無限スクロール（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

あなたのコードは結構ですが、問題がtumblrのフォトセット変数です。 Tumblrはiframeを生成し、石積みはその高さをつかむことができず、スペースを確保できません。代わりにPixel Union's extended photosetsのようなものを使用してください。これは画像として写真セットをロードし、石積みはその高さをつかむことができます。

Answer 2

これは古いですが、私はphotosetsと石工で同様の問題を抱えていて、chloeの提案は機能していませんでした。ただし、別の方法があります。 Tumblrにはphotoset変数を実際の写真に置き換える機能があり、誰かがそれらを格子に再構成するプラグインを作りました：Photoset Grid。このWebページは、コードをtumblrテーマに実装する方法に関する便利なチュートリアルを提供します。