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

Ich habe den folgenden Code nach der append Befehl und alles war in Ordnung:

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

Der Grund dafür:

Ungeladene Bilder können Masonry-Layouts durcheinander bringen und dazu führen, dass sich Elemente überlappen. imagesLoaded löst dieses Problem. imagesLoaded ist ein separates Skript, das Sie unter imagesloaded.desandro.com herunterladen können.

Quelle

Answer 2

Sie vermissen den Aufruf Masonry layout. Laut der Dokumentation müssen Sie das Layout aktualisieren, indem Sie .masonry() nach jeder Änderung (zum Beispiel .masonry('appended') ):

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

(Quelle: http://masonry.desandro.com/methods.html )

Answer 3

Ich hatte das gleiche Problem mit meinem Ajax-Listing, ich konnte es lösen, indem ich reloadItems & layouts Funktionen nach ajax antworten :

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

Answer 4

Hier wird es klar erklärt 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 );
        }
    });
});

in Ihrem success function müssen Sie Ihre Antwort "html" in eine jquery object und dann anhängen mit html() o append() .

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

der endgültige Code sollte lauten

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

Answer 5

Diese Lösung funktioniert bei mir:-

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