J'essaie d'utiliser des fichiers ajax et le plug-in jQuery Masonry pour ajouter des éléments, mais pour une raison quelconque, les nouveaux éléments ne sont pas appliqués à la maçonnerie?
J'utilise
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 );
}
});
});
Toutefois, le class="masonry-brick"
n'est pas appliqué aux éléments ajoutés par la suite, ce qui signifie qu'ils complètent complètement le positionnement?
Avait un problème similaire et à la place utilisé la ligne suivante (converti pour votre code). Désolé, je ne me rappelle pas où je l'ai trouvé.
Dans votre code, remplacez ceci:
jQuery("#content").append(el).masonry( 'appended', el, true );
Avec ça:
jQuery("#content").append(el).masonry( 'reload' );
Il semble que la fonction masonry
attend un objet jQuery en tant que deuxième paramètre et non une chaîne HTML brute. Vous devriez pouvoir résoudre ce problème en encapsulant le paramètre success callback de la manière suivante:
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' );
success: function (response) {
if(response.length > 0) {
var el = js(response);
setTimeout(function () {
js("#masonry").append(el).masonry( 'appended', el).masonry('layout');
}, 500);
}
}
fonctionne bien pour moi.
J'ai eu le même problème avec ma liste ajax, je pourrais le résoudre en appelant les fonctions reloadItems
& layouts
après que ajax réponde:
var mediaItemContainer = $( '#container' );
mediaItemContainer.masonry( {
columnWidth: '210px',
itemSelector: '.item'
} );
$( mediaItemContainer ).prepend( '<div class="item">foo</div>' );
$( mediaItemContainer ).masonry( 'reloadItems' );
$( mediaItemContainer ).masonry( 'layout' );
J'ai ajouté le code suivant après la commande append
et tout allait bien:
$grid.imagesLoaded().progress( function() {
$grid.masonry('layout');
});
La raison:
Les images non chargées peuvent détacher les dispositions de maçonnerie et provoquer le chevauchement des éléments. imagesLoaded résout ce problème. imagesLoaded est un script séparé que vous pouvez télécharger sur imagesloaded.desandro.com.
Il vous manque un appel de maquette de maçonnerie. Selon la documentation, vous devez actualiser la présentation en exécutant .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);
}
}
});
c'est clairement 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 que votre réponse "html" soit encapsulée dans un jquery object
puis ajoutée à l'aide de html()
ou append()
.
var $content = $( html );
jQuery("#content").append($content).masonry( 'appended', $content );
le code final devrait ê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 les futurs utilisateurs qui trouvent ce problème et les solutions ci-dessus ne fonctionnent pas: j'ai trouvé un problème avec mon sélecteur et l'élément que j'ai ajouté n'a pas le même cas, à savoir itemSelector
était .Card
J'ajoutais <div class="card">
.
J'espère que cela t'aides.