web-dev-qa-db-ja.com

jQuery MasonryとAjax Append Item？

私はいくつかのアイテムを追加するためにいくつかのajaxとjQuery Masonryプラグインを使用しようとしていますが、何らかの理由で新しいアイテムに石積みが適用されていませんか？

私は使っています

jQuery.ajax({
    type: "POST",
    url: ajax_url,
    data: ajax_data,
    cache: false,
    success: function (html) {
        if (html.length > 0) {
            jQuery("#content").append(html).masonry( 'appended', html, true );
        }
    });
});

ただし、後に追加されるアイテムにはclass="masonry-brick"が適用されないため、ポジショニングが完全に埋まってしまいます。

jqueryajaxjquery-masonry
29
Andy

同様の問題があり、代わりに次の行を使用しました（コード用に変換）。申し訳ありませんが、どこで見つけたか思い出せません。

コードでこれを置き換えます：

jQuery("#content").append(el).masonry( 'appended', el, true );

これとともに：

jQuery("#content").append(el).masonry( 'reload' );

http://masonry.desandro.com/methods.html

23
frankp

masonry関数は、生のHTML文字列ではなく、jQueryオブジェクトを2番目のパラメーターとして予期しているようです。次のように成功コールバックパラメータをラップすることで、これを修正できるはずです。

jQuery.ajax({
    type: "POST",
    url: ajax_url,
    data: ajax_data,
    cache: false,
    success: function (html) {
        if (html.length > 0) {
            var el = jQuery(html);
            jQuery("#content").append(el).masonry( 'appended', el, true );
        }
    });
});
41
ryanlahue
var mediaItemContainer = $( '#container' );
mediaItemContainer.masonry( {
    columnWidth:  '210px',
    itemSelector: '.item'
} );
$( mediaItemContainer ).prepend( '<div class="item">foo</div>' );
$( mediaItemContainer ).masonry( 'reloadItems' );
$( mediaItemContainer ).masonry( 'layout' );

ソリューション

26
subone
success: function (response) {
  if(response.length > 0) {
     var el = js(response); 
     setTimeout(function () {
       js("#masonry").append(el).masonry( 'appended', el).masonry('layout');
     }, 500);
  }
}

私にとってはうまくいきます。

5
kdgilang

以下は私のために働いています。私のWebページで[さらに読み込む]ボタンをクリックすると、htmlアイテムのセットを返す（ajaxからの部分ビューを返す）ajaxがあります。以下は、動的に生成される部分ビューです。

_foreach (var item in Model.SocialFeedList)
{
        <div class="grid-item">
            <div class="grid-inner">
                <div class="img-holder" style="background-image:url(imageURLHere)">
                </div>
                <div class="content-area">
                    <h3><a target="_blank" href="SomeLink">TitleOfTheLink</a></h3>
                    <p>SomeDescription</p>
                    <h5 class="date"><span>Published</span>: 2016/07/13</h5>
                </div>
            </div>
        </div>
}_

成功コールバックajaxメソッドでは、以下を実行しました。ここで、「response」は、上記のhtmlから取得するhtmlアイテムのセットです。ここで、「divFeedList」は、html要素のセットを表示するルート要素です。

jQuery("divFeedList").append(response).masonry('reloadItems', response, true).masonry();

答えが不明な場合はお知らせください。

4
Chamal Perera

appendコマンドの後に次のコードを追加しましたが、すべて問題ありませんでした。

$grid.imagesLoaded().progress( function() {
    $grid.masonry('layout');
});

理由：

アンロードされた画像は、Masonryレイアウトを無効にし、アイテム要素を重複させる可能性があります。 imagesLoadedはこの問題を解決します。 imagesLoadedはimagesloaded.desandro.comからダウンロードできる別のスクリプトです。

ソース

3
Chris Kon

Masonryレイアウト呼び出しがありません。ドキュメントによると、レイアウトを更新し、すべての変更後に.masonry()を実行する必要があります（たとえば.masonry('appended')）：

$grid.masonry()
  .append(elem)
  .masonry('appended', elem)
  // layout
  .masonry();

（ソース： http://masonry.desandro.com/methods.html ）

1
poxip

私のajaxリストにも同じ問題がありました。ajaxが応答した後にreloadItems＆layouts関数を呼び出すことで解決できました。

var mediaItemContainer = $( '#container' );
mediaItemContainer.masonry( {
    columnWidth:  '210px',
    itemSelector: '.item'
} );
$( mediaItemContainer ).prepend( '<div class="item">foo</div>' );
$( mediaItemContainer ).masonry( 'reloadItems' );
$( mediaItemContainer ).masonry( 'layout' );
1
Youssef AAZRI

この解決策は私のために働く：-

  jQuery.ajax({
    type: "POST",
    url: ajax_url,
    data: ajax_data,
    dataType: 'json',
    cache: false,
    success: function(response) {
      if (response.length > 0) {
        var $container = $('#container');
        var msnry = $container.data('masonry');
        var elems = [];
        var fragment = document.createDocumentFragment();
        for (var x in response) {
          var elem = $(response[x]).get(0);
          fragment.appendChild(elem);
          elems.Push(elem);
        }
        $container.appendChild(fragment);
        msnry.appended(elems);
      }
    }
  });
0
Mudaser Ali

ここで明確に説明されています https://masonry.desandro.com/methods.html#prepended

_jQuery.ajax({
    type: "POST",
    url: ajax_url,
    data: ajax_data,
    cache: false,
    success: function (html) {
        if (html.length > 0) {
            jQuery("#content").append(html).masonry( 'appended', html, true );
        }
    });
});
_

_success function_で、応答 "html"を_jquery object_でラップし、html()またはappend()を使用して追加する必要があります。

_var $content = $( html );
jQuery("#content").append($content).masonry( 'appended', $content );
_

最終的なコードは

_jQuery.ajax({
    type: "POST",
    url: ajax_url,
    data: ajax_data,
    cache: false,
    success: function (html) {
        if (html.length > 0) {
            var $content = $( html );
            jQuery("#content").append($content).masonry( 'appended', $content );
        }
    });
});
_
0
Aamer Shahzad

この問題を見つける将来の人々のために、上記の解決策は彼らのために機能しません：セレクタと私が追加した要素に同じケースを持っていない問題を見つけました、つまり、itemSelectorは.Cardしかし、私は<div class="card">。

お役に立てれば。

0
Sam