0

jquery masonry と投稿の無限スクロールを使用するタンブルログがあります。石積みは最初のいくつかのポストにのみ適用され、その後は他のすべてに重なります。この種の質問がよく聞かれることは知っていますが、誰も答えを知らないようです. これが私のコードです：

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<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({
columnWidth: 196,
itemSelector: '.post',
isAnimated : false
});
});

$wall.infinitescroll({
navSelector : '#navigation', 
nextSelector : 'a#nextPage', 
itemSelector : '.post', 
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>

これが私のリンクです。 ありがとう！

4

1 に答える 1

3

あなたはあなたに簡単な答えを与えるにはあなたのページにあまりにも多くの問題があります。

  1. あなたは2つ持っています！さまざまな「無限スクロール」スクリプトが含まれています。

    1つはこの行です：

    <script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>

    そして、もう1つは、この他のスクリプトに含まれています。

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

    最初のスクリプトを削除し、私が推測する2番目のスクリプトを保持します。

  2. 2番目のスクリプトは、Masonryプラグインで使用することを目的としたものですが、指定したコード例はすべて間違っています。どこから始めたらいいのかわからない。

    $ wall.masonryの呼び出しでは、「singleMode：true」は有効なオプションではありません。

    スクリプトで参照する要素のいくつかは、ページにも存在しません。

    1. '.masonryWrap'は存在しません
    2. 「#navigation」は存在しません
    3. 'a＃nextPage'は存在しません

  3. ページにはナビゲーションリンクがないため、jqueryinfinitescroll関数が「navSelector」と「nextSelector」に使用するものはありません。

だからそれをすべてまとめる。

最初に行う必要があるのは、競合する2つのInfiniteScrollスクリプトを取り除くことです。

次に、テーマコードにナビゲーションリンクを追加して、無限スクロール機能を正しく使用できるようにする必要があります（次のページへのリンクが何であるかを知る必要があります）。

例：これをテーマコードのどこかに挿入しますが、{block：Posts}や{block：PermalinkPage}などの中に閉じ込められていないことを確認してください。

{block:Pagination}
    <div id="pagination" style="display:none;">
        {block:PreviousPage}<a id="previous_page" href="{PreviousPage}">previous</a>{/block:PreviousPage}
        {block:NextPage}<a id="next_page" href="{NextPage}">next</a>{/block:NextPage}
    </div>
{/block:Pagination}

その後、ページに実際に存在する要素を正しく参照するようにJSコードを修正する必要があります。

例：

<script type="text/javascript">
$(document).ready(function(){
    var $wall = $('#posts');
    $wall.imagesLoaded(function(){
        $wall.masonry({
            itemSelector: '.post',
            isAnimated : false
        });
    });

    $wall.infinitescroll({
        navSelector : '#pagination', 
        nextSelector : '#next_page', 
        itemSelector : '.post'
    },
    function( newElements ) {
        var $newElems = $( newElements );
        $newElems.hide();
        $newElems.imagesLoaded(function(){
            $newElems.fadeIn('slow');
            $wall.masonry( 'appended', $newElems, false );
        });
    });
});
</script>
于 2012-06-20T22:36:56.970 に答える