la maçonnerie de jQuery et les accessoires Ajax?

Il semble que le masonry la fonction attend un objet jQuery comme second paramètre et non une chaîne HTML brute. Vous devriez pouvoir corriger cela en enveloppant le paramètre de succès callback comme ceci:

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

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

Solution

Suivant a fonctionné pour moi. J'ai un ajax qui retourne un ensemble d'éléments html (renvoie une vue partielle, à partir de l'ajax) lorsque je clique sur un bouton load more dans ma page web. Ci-dessous la vue partielle, qui est générée dynamiquement.

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

dans la méthode succès callback ajax, j'ai fait ce qui suit,où "response" est l'ensemble des éléments html que j'obtiens à partir du html ci-dessus. Où "divFeedList" est l'élément racine où j'affiche l'ensemble de html élément.

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

veuillez me faire savoir si la réponse n'est pas claire.

j'ai eu le même problème avec ma liste ajax, je pouvais le résoudre en appelant reloadItems&layouts fonctions après l'ajax répondre :

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

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

fonctionne très bien pour moi.

j'ai ajouté le code suivant après le append commande et tout allait bien:

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

La raison:

les images non chargées peuvent jeter hors des dispositions de maçonnerie et causer des éléments d'élément de chevauchement. imagesload résout ce problème. imagesload est un script séparé que vous pouvez télécharger à imagesloaded.desandro.com.

source

vous manquez l'appel de mise en page de maçonnerie. Selon les documents, vous devez actualiser la mise en page, exécution .masonry() après chaque modification (par exemple .masonry('appended')):

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

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

Cette solution fonctionne pour moi:-

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

juste pour les personnes futures qui trouvent ce problème et les solutions ci-dessus ne fonctionnent pas pour eux: j'ai trouvé un problème avec mon sélecteur et l'élément que j'ai ajouté n'ayant pas le même cas, i.e. itemSelector.Card mais j'étais en ajoutant <div class="card">.

Espérons que cette aide.

c'est bien expliqué ici 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 );
        }
    });
});

dans votre success function, vous avez besoin de votre réponse "html" pour être enveloppé dans un jquery object et ensuite ajouter en utilisant html() ou append().

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

le code final doit être

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

Pour la Maçonnerie v3.2.2 (au plus tard au moment de ce post), c'est ce qui fonctionne:

en supposant que newHtml est une chaîne de caractères comme ceci:

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

Vous traiter comme ceci:

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

j'ai trouvé une solution qui fonctionne très bien pour moi. il recharge toutes les demi-secondes la disposition d'une instance de maçonnerie.

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

de cette façon, vous pouvez ajouter des choses en utilisant ajax, et voilà, il y a la disposition de maçonnerie.