2

だから私は今私の Tumblr のテーマに取り組んでいます。Masonry を使用してすべての投稿を 5 列のグリッドに表示し、スクロール ダウン時に無限スクロール スクリプトを使用して新しい画像をグリッドにロードしています。残念ながら、ほとんどの場合、下にスクロールすると画像が重なっています。画像が読み込まれる前に Masonry がトリガーされている可能性があることがわかりましたが、今のところこれを修正する方法がわかりません。私はすでに (window).load の代わりに (document).ready を使用していますが、それでも画像は重なり合っています。完全なコード スニペットは次のとおりです。

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


$(window).load(function () {
$('.posts').masonry(),
$('.masonryWrap').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: 11000,
loadingImg : "",
loadingText : "<em></em>",
},
// call masonry as a callback.
function() { $('.posts').masonry({ appendedContent: $(this) }); }
);
});
</script>
<script type="text/javascript">$(window).load(function(){$("p").remove(":contains('Source:')");});</script>

誰かがそれを機能させる方法について考えを持っていますか? どんな助けでも大歓迎です！

4

1 に答える 1

1

Masonry は、画像がロードされてより多くのスペースを占有する前にアイテムを絶対に配置しています。これを克服するには、Jquery imagesLoaded を使用します。最初は要素を非表示にし、読み込みが完了したら表示することができます。次のようなことを試してください：

//Wire masonry onto the photolist with whatever defaults you need
$photolist.imagesLoaded(function () {
    $photolist.masonry({
        // options
        itemSelector: '.photo',
        columnWidth: 226,
        isFitWidth: true,
        gutterWidth: 12
    });
});
于 2013-05-04T17:06:38.203 に答える