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

Nur für diejenigen, die dieses Problem haben und bei denen die oben genannten Lösungen nicht funktionieren: Ich habe ein Problem mit meinem Selektor und dem Element, das ich hinzugefügt habe, gefunden, das nicht denselben Fall hat, d.h. itemSelector war .Card aber ich habe angehängt <div class="card"> .

Ich hoffe, das hilft.

Answer 2

Bei Masonry v3.2.2 (zum Zeitpunkt dieses Beitrags die neueste Version) funktioniert das so:

Angenommen, newHtml ist eine Zeichenkette wie diese:

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

Sie verarbeiten es so:

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

Ich habe 2 Stunden gebraucht, um das herauszufinden!

Answer 3

Ich habe eine Lösung gefunden, die gut für mich funktioniert. es lädt jede halbe Sekunde das Layout einer Instanz von Mauerwerk neu.

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

auf diese Weise können Sie Dinge mit Ajax anhängen, und voilá, es ist das Mauerwerk Layout.