私は、David DeSandroのjQuery MasonryプラグインとPaul IrishのInfinite Scrollプラグインを使用しているWordpress Webサイトで作業しています。 Masonryを呼び出すInfinite Scrollプラグインのコールバックオプションがあります。石積みのは、この関数の2例を提供しています無限スクロールプラグインでのコールバックの問題
$('#secondary').masonry({ appendedContent: $(this) });
または
$(this).masonry({ appendedContent: $(newElements) });
をしかし、私はそれらを使用して奇妙な問題に直面しています。次の投稿が取り出されるたびに、非常に拳のポストの前に空きスペースがたくさんあるように見えることを除いて、すべてうまく動作します。私にとっては、このスペースはページ "1"と同じ高さのようです。 これはコードです：
var $wall = jQuery('#secondary');
$wall.masonry({ singleMode: true,
itemSelector: '.box:visible'
});
と私はInfinteスクロールのコールバックオプションのためのさまざまな機能を試みた：私は空のスペースを取得して最初のコールバックコードで
$('#secondary').masonry({ appendedContent: $(this) });
または
$(this).masonry({ appendedContent: $(newElements) });
を2番目のコールバックコード、コールバック付きのMasonryブレーク、2番目のページが最初のものになります。スクリプトは私にエラーを与えます： "未定義の要素"としてのnewelements。
私は、第2ページのすべてのボックスを整列し、最初のページではないことを間違って知りたいと思います。私にとっては、新しい要素を現在の要素に追加するのではなく、新しい要素に最初のページ要素を追加するようです。
しかし、私は問題の原因を見つけることができません。
問題を解決するのに手伝ってください。
メーソンリーへのリンク：http://github.com/desandro/masonry/raw/master/jquery.masonry.js
無限スクロールもgithubにあります。
ありがとうございます！
リビジョン： フル無限コード：
<script type="text/javascript">
(window.INFSCR_jQ ? jQuery.noConflict() : jQuery)(function($){
// Infinite Scroll jQuery+Wordpress plugin
$('#secondary').infinitescroll({
debug : false,
nextSelector : "div.navigation a:first",
loadingImg : "/infinite-scroll/ajax-loader.gif",
navSelector : "div.navigation",
contentSelector : "#secondary",
itemSelector : "div.box"
},function(){
Cufon.replace('li');
Cufon.replace('h1');
$('#secondary').masonry({ appendedContent: $(this) });
});
});
</script>
あなたはあなたの完全な無限スクロールコードを投稿することができますか？また、新しいページの要求から何が戻ってくるかを確認するために、火かき棒を使用します。 – ifaour
コメントありがとうございました。質問に無限のスクロールコードを追加しました。火かき棒でチェックすると、Masonryが動作していることが示され、2ページ目のボックスも整列されていますが、それらのすべてが高さに揃っています！スタイル= "位置：絶対;左：0px;上：0px;"という形式です。スクロールダウンした後、この最初のボックススタイルはstyle = "position：absolute; left：380px; top：2754px;"に変わります。 – erick16
githubのフルinfineScrollコードへのリンクは次のとおりです：http：//github.com/paulirish/infinite-scroll – erick16