2011-10-21 29 views
5

これはsame question as this oneですが、私はJSFiddle上で問題の再現をhereにしています。だから、私は再任すると思った。JQuery Masonryに追加された項目を認識させるにはどうすればよいですか?

JQuery Masonryは、最初の実行時に一度だけそのコンテナの子を評価するようです。その後、DOMをもう一度見て、子どもを再評価することはできません。私はあなたのフィドルhereを更新

$("#container").append(content).masonry("appended", content); 

答えて

2

あなたはフリーメーソンのappendedメソッドに新しいコンテンツを渡す必要があります。

+0

ありがとうございます!なぜ私は石積みに内容が追加されていることを伝える必要があるのか​​分かりません。呼び出されたときにレンガをリロードするだけで、DOMからそれを取得できます。 –

+0

あなたは膨大な数のレンガを持っている場合、新しい要素だけを処理するほうがよいでしょう。 –

+0

おそらく。レンガの数によって異なります。私は、150以上のレンガが動的に積み重なり、目に見える遅れはありません。 –

1

私は誰もがこれですべての問題を参照してください

_reLayout : function(callback) { 

    // This is my added line. 
    // Items might have been added to the DOM since we laid out last. 
    this.reloadItems(); 

    // reset columns 
    var i = this.cols; 
    this.colYs = []; 
    while (i--) { 
    this.colYs.push(this.offset.y); 
    } 
    // apply layout logic to all bricks 
    this.layout(this.$bricks, callback); 
}, 

// ====================== Convenience methods ====================== 

// goes through all children again and gets bricks in proper order 
reloadItems : function() { 
    this.$bricks = this._getBricks(this.element.children()); 
}, 


reload : function(callback) { 
    this.reloadItems(); 
    this._init(callback); 
}, 

ライン305でjQueryの石造コードで_reLayout機能への「レンガ」リロードする行を追加することでこれを解決しているように見えますか?

+1

ありがとうございました。あなたのreloadItems()編集が私の狂ったFirefoxの問題を解決しました。私の石工のコンテンツは、絶えず素早くajax経由で追加されたレンガで更新され、レンガも削除されています。 Firefoxだけでは、約3回のコンテンツ更新の後に最初の/上の行の先頭位置がオフになっていて、masonry()関数のサイズ変更または再呼び出しを行っても間違った位置にとどまることになりました。私が気付いた_placeBrick関数を渡された値を追跡するとき、私は "無限大"の値を取得していました。私は再び理由は分かりませんが、これは無限大va –

+0

クール!他の人を助けてくれてうれしいです。多分私は、リリースされたコードのオプションとしてそれを得ることについて見ることができます。 –

1

Iはreload方法を使用した:

.masonry('reload')

ここmasonry doc for reloadだ:

「次に.masonryをreloadItemsをトリガするための便利な方法()アイテムを付加又は挿入のために有用。 "

+0

リンクが死んでいます。 :( – Manwal

0

jQueryを使用している場合は、これですべての問題が解決されます。あなたはこのようなもので、あなたのHTML/PHPページに石工を含めている

<script src="js/masonry.min.js"></script> 
<script src="js/masonry-init.js"></script> 

をそして以下でjs/masonry-init.jsファイルを作成します:

<script src="js/masonry.min.js"></script> 
<script> 
    $('#ms-container').masonry({ 
     columnWidth: '.ms-item', 
     itemSelector: '.ms-item' 
    }); 
</script> 

代わりに、このようにそれを残して

$('#ms-container').masonry({ 
    columnWidth: '.ms-item', 
    itemSelector: '.ms-item' 
}); 
var masonryUpdate = function() { 
    setTimeout(function() { 
     $('#ms-container').masonry(); 
    }, 500); 
} 
$(document).on('click', masonryUpdate); 
$(document).ajaxComplete(masonryUpdate); 

もう一度心配しないでください!

関連する問題