jQuery Masonry und Ajax Append Items?

Question

Ich versuche, einige Ajax und das jQuery Masonry-Plugin zu verwenden, um einige Elemente hinzuzufügen - aber aus irgendeinem Grund die neuen Elemente sind nicht immer die Masonry angewendet?

Ich benutze

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

Die nachträglich angefügten Einträge haben jedoch nicht die class="masonry-brick" angewandt, was bedeutet, dass sie die Positionierung komplett durcheinander bringen?

Answer 1

Es scheint, dass die masonry Funktion erwartet ein jQuery-Objekt als zweiten Parameter und nicht einen rohen HTML-String. Sie sollten in der Lage sein, dies zu beheben, indem Sie den Erfolgs-Callback-Parameter wie folgt einpacken:

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

Answer 2

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

Lösung

Answer 3

Ich hatte ein ähnliches Problem und habe stattdessen die folgende Zeile verwendet (konvertiert für Ihren Code). Sorry, ich weiß nicht mehr, wo ich sie gefunden habe.

Ersetzen Sie dies in Ihrem Code:

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

Mit diesem:

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

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

Answer 4

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

funktioniert bei mir einwandfrei.

Answer 5

Folgendes hat bei mir funktioniert. Ich habe eine Ajax, die eine Reihe von HTML-Elemente zurückgibt (gibt eine teilweise Ansicht, von der Ajax), wenn ich eine Schaltfläche "Load More" in meiner Webseite klicken. Unten ist die Teilansicht, die dynamisch generiert wird.

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

In der Ajax-Methode für den Erfolgs-Callback habe ich das Folgende getan, wobei "response" die Menge der HTML-Elemente ist, die ich aus der obigen HTML-Datei erhalte. Wo "divFeedList" ist das Root-Element, wo ich die Menge der HTML-Elemente zeigen.

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

Bitte lassen Sie mich wissen, wenn die Antwort unklar ist.