jquery - jQuery Masonry と Ajax Append アイテム?

Question

いくつかの 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"、配置が完全に詰め込まれますか?

score 42 · Accepted Answer

この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 );
        }
    });
});

score 24 · Accepted Answer

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

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

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

これとともに：

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

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

score 5 · Accepted Answer

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

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

score 3 · Accepted Answer

以下は私のために働いています。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 メソッドでは、以下を実行しました。「応答」は、上記の html から取得した html アイテムのセットです。「divFeedList」は、一連の html 要素を表示するルート要素です。

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

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

score 1 · Accepted Answer

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' );

score 0 · Accepted Answer

この解決策は私のために働きます:-

  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);
      }
    }
  });

score 0 · Accepted Answer

この問題を見つけ、上記の解決策が機能しない将来の人々のために：セレクターと追加した要素に同じケースがない、つまり、is but I was appendingitemSelectorという問題が見つかりました。.Card<div class="card">

お役に立てれば。

score -1 · Accepted Answer

Masonry v3.2.2 (この記事の時点で最新) では、次のように動作します。

newHtml が次のような文字列であると仮定します。

<li>item 1</li><!--split-->
<li>item 2</li><!--split-->
<li>item 3</li>

次のように処理します。

$.get(apiUrl, function(newHtml) {
    var textArr = newHtml.split("<!--split-->");
    var elArr = [];
    $.each(textArr, function(i,v) {
        if (v) {
            elArr.push($(v)[0]);
        }
    });
    $(this).append(elArr);
    $container.waitForImages( function() {
        $container.masonry('appended', elArr);
    });
}

これを見つけるのに2時間かかりました！

score -2 · Accepted Answer

私にとってうまくいく解決策を見つけました。石積みのインスタンスのレイアウトを 0.5 秒ごとに再読み込みします。

//initialization of a masonry object:

var msnry = new Masonry("#container",{
itemSelector: '#post',
gutter: 15
}); 

//thread that makes the magic happens:

setInterval(function(){
msnry.reloadItems();
msnry.layout();
},500);

このようにして、ajax を使用して追加することができます。ほら、石造りのレイアウトがあります。

jquery - jQuery Masonry と Ajax Append アイテム?

13 に答える 13

Related

Reference