jQuery Masonry tumblrテーマの無限スクロールと画像の重複問題

Question

私はプログラミング（javascript）の新機能ですが、私のtumblrテーマを正しく機能させるために過去数日間の研究を行っています。私の質問がよくあることは分かっていますが、多くの同様の例で与えられたコードの一部を正しく統合するのに十分な知識がないようです。

My themeは、tumblrの「15ページあたりの投稿」の制限を無効にし、「エンドレススクロール」オプションを使用すると、すべての投稿（すべての写真）を1つの無限ページに入れる必要があります。まあ、そうではありません。 hereからの少しの助けを借りて、私は{ブロック：投稿}をラップして、私が結婚した石工（）コールでいくつかのランダムな変更を加えましたthis

私の写真は重複していないことがわかりました（最後に！）、最初の15個の投稿の後に新しいページが作成され、最後の写真が正しく整列していないように見えます。

<script type="text/javascript"> 

$(window).load(function() { 
$('.autopagerize_page_element').masonry(), 
$('.autopagerize_page_element').infinitescroll({ 
navSelector : "div.navigation", 
// selector for the paged navigation (it will be hidden) 
nextSelector : "div.navigation a#nextPage", 
// selector for the NEXT link (to page 2) 
itemSelector : ".autopagerize_page_element", 
// selector for all items you'll retrieve 
bufferPx : 10000, 
extraScrollPx: 12000, 
loadingImg : "http://b.imagehost.org/0548/Untitled-2.png", 
loadingText : "<em></em>", 
}, 
// call masonry as a callback. 
function() { $('.autopagerize_page_element').masonry({ appendedContent: $(this) }); } 
); 
}); 
</script> 

私が知っている、その混乱... は実際にいくつかの助けに感謝します：

私のjQueryの石工コードはこれです。

Answer 1

私がtumblrで動作するように使用されていないんだけど、私は何が起こっていることができます。

Line 110:

は、このスクリプトが原因で、あなたが呼び出すたびに石積みのためのエントリのラッパーのdivを作成していますスクリプト、各ロードは新しいページのように見える、私はあなたが単にそれを削除することができると思います。

いくつかのヒント：画像の重複使用を避けるために あなたは$（ウィンドウ）を待つ必要はありませんが、$（関数（でそれを変更、石材を実行する.LOAD）

は石工方法とimagesLoadをappened：Refer this

私はあなたが最後のバージョン（2.1.06）石工を使用していることを確認し、あなたが石材1.0.1を使用している参照

例コード：

$(function() { 
    //$('.autopagerize_page_element').masonry(); 
    var $container = $('.autopagerize_page_element'); 
    //wait until images are loaded 
    $container.imagesLoaded(function(){ 
     $container.masonry({itemSelector: '.entry'}); 
    }); 
$('.autopagerize_page_element').infinitescroll({ 
navSelector : "div.navigation", 
// selector for the paged navigation (it will be hidden) 
nextSelector : "div.navigation a#nextPage", 
// selector for the NEXT link (to page 2) 
itemSelector : ".entry", 
// selector for all items you'll retrieve 
bufferPx : 10000, 
extraScrollPx: 12000, 
loadingImg : "http://b.imagehost.org/0548/Untitled-2.png", 
loadingText : "<em></em>", 
}, 
// call masonry as a callback. 
//function() { $('.autopagerize_page_element').masonry({ appendedContent: $(this) }); } 
     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); 
     }); 
    } 
); 
}); 

と、このヘッダブロック内の最後のスクリプトを削除してください：

<script type="text/javascript" src="http://static.tumblr.com/imovwvl/dJWl20ley/jqueryformasonry.js"></script> 
    <script type="text/javascript" src="jquery.masonry.min.js"></script> <!-- last masonry version --> 
    <script src="http://static.tumblr.com/df28qmy/SHUlh3i7s/jquery.infinitescroll.js"></script> 
<!--<script src="http://static.tumblr.com/thpaaos/lLwkowcqm/jquery.masonry.js"></script>--> 

はそれが私は同じ問題に直面しています