0

私は Tumblr のテーマに Infinite Scroll を使用して Masonry を実装しています。これは以前に成功したことがありますが、これを「破壊」して画像を散らかすのを止めることはできません。必死になる！

neurodamage-theme4.tumblr.comでのライブ デモ(パスワードはゲストです)。

#posts div とその内容 (そしてもちろんスクリプト) を除いて body タグからすべてを削除しようとしましたが、問題は解決しませんでした。つまり、周囲の div の問題ではないようです。

これが私のスクリプトです：

$(document).ready(function() {
    $('#post-video iframe').attr('width', '300');   // resize embedded videos
});

var $container = $('#posts');

$container.imagesLoaded( function(){
    $container.masonry({
        itemSelector : '.post',
        columnWidth : 300
    });
});

$container.infinitescroll({
    navSelector  : '#pagination',    // selector for the paged navigation 
    nextSelector : '#pagination li a.pagination_nextlink',  // selector for the NEXT link (to page 2)
    itemSelector : '.post',     // selector for all items you'll retrieve
    loading: {
        finishedMsg: '',
        img: 'http://static.tumblr.com/6u5yyqj/iUtmgivzo/loading.gif',  // http://static.tumblr.com/6u5yyqj/iUtmgivzo/loading.gif, http://static.tumblr.com/6u5yyqj/yWkmgj1jq/loadingdark.gif
    }
    },
    // trigger Masonry as a callback
    function( newElements ) {
        var $newElems = $( newElements );
        $container.masonry( 'appended', $newElems );
    }
);

そして、これが私が埋め込んだものです。すべてが最新であることを確認してください。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://static.tumblr.com/6u5yyqj/MPKmktfkv/jquery.masonry.min.js"></script>
<script src="http://static.tumblr.com/6u5yyqj/nsQmkth3k/jquery.infinitescroll.min.js"></script>

完全なコードを見たい場合: gist.github.com/neuraldamage/5307289

誰かがこれにクラックを入れることができれば、私は非常に感謝しています!

4

2 に答える 2

0

問題はこれです：

<div id="posts" style="position: relative; height: 483px;" class="masonry">

その高さをコンテンツに合わせて変更するか (十分な大きさではないため)、単に宣言しないでください。

要素を調べたところ、height値を削除するだけで、すべてが適切な場所に移動しました。

于 2013-04-06T05:56:30.017 に答える
0

実際にはページに複数あるため、多くの問題が発生<div id="posts">しています。Tumblrコードが必要以上に吐き出している可能性があります.

于 2013-04-07T21:07:48.953 に答える