4

ajax を使用して、画像を含む div を更新しています。最初に石積みを使用してレイアウトを追加します。

次に、ajax 呼び出しは、html() メソッドを使用して div を更新する js を返します。完了したら、 を呼び出していmasonry('reloadItems')ます。しかし、メーソンリーはすべての画像を互いにロードします。ページのサイズを変更すると、機能します。ページのサイズ変更を手動でトリガーしようとしましたが、石工が調整を行うことはありません。

JS:

$('#timerange-select, #category_select').bind('change', function() {
    form=$('#images-filter-form');
    $.get(form.action, form.serialize(),function(){
      var $container = $('#images_container');
      $container.imagesLoaded(function(){$container.masonry('reloadItems');});
      $(window).trigger('resize');
    }, 'script');
 });

この ajax リクエストの応答は次のとおりです。

$('#images_container').html('<%= escape_javascript(render("shared/random_issues")) %>');

だから私は画像を追加していません。正確にはコンテナを交換しています。 ここに画像の説明を入力

これは実際には互いにロードされた 10 個のイメージです。

編集: http://stackoverflow.com/questions/17697223/masonry-images-overlapping-above-each-other/17697495?noredirect=1#17697495css と html を参照してください。

4

2 に答える 2

7

さて、私は問題を解決したように見えました。

以下を使用して石積みオブジェクトを取得しました。

var masonry = $('#issue_container').data('masonry');

このメソッドを使用してreloadItems()、次にlayout(). 最初のメソッド呼び出しの後、すべてのアイテムが 1 つのタイル内で互いに重なり合い、layout() を呼び出した後、素敵な組積造レイアウトが形成されます。左上隅から素敵なレイアウトに移動するアニメーションも素敵です:D.

于 2013-08-02T12:56:06.647 に答える
1

I resolved a similar issue just now. I had an outer div (enclosing the masonry container) that was set to {display: none} in CSS, and then made visible later on using $('#...').show(); I had the same issue. When the div + container is first made visible all the elements overlap. Then when the window is re-sized it's redrawn properly.

The issue seemed to be that when the elements are first created, the size of the div is zero (cause of the display:none setting), and when the Div is displayed (.show();) the elements are already rendered for a zero height container. Hence the overlap.

I fixed this by preventing the layout from being initialized till it's made visible

$myContainer = $('#myTiles');
$myContainer.masonry({
    itemSelector: '.myTile',
    isInitLayout: false
});

and then calling layout later on (in my case on a button click) using 

$myContainer.masonry();

私はあなたのコードをチェックしましたが、CSS /スクリプト設定を使用して私の側で問題を再現することはできませんでした.

于 2013-07-30T12:50:12.617 に答える