Ho avuto il problema inverso come descritto: il primo caricamento funzionava bene in Mac OS X Safari, ma cambiare la griglia con tutti i nuovi elementi li ha fatti impilare tutti nell'angolo in alto a sinistra. Inoltre, l'attesa per l'evento pronto e l'impostazione dell'altezza CSS & sui nostri elementi non l'hanno risolto.
Sul nostro sito, abbiamo categorie di dati che vengono visualizzati nella griglia della muratura e solo una categoria mostra alla volta. Un utente può cambiare la categoria in qualsiasi momento e attivare una richiesta AJAX per caricare i nuovi dati. In ultima Safari (9.1, 10) e browser come Chrome, si potrebbe semplicemente fare questo quando si cambia la categoria di scambiare in tutti i nuovi elementi:
// domData is HTML string from the server
// IMJS is our global variable that we use for globals and lookups
$("#divTemplateCategoryName").after(domData); // insert new HTML
var elementsToAdd = $(".grid-item-template-info"); //select the elements
IMJS.MasonryGrid.masonry('addItems', elementsToAdd); // tell masonry to add them
IMJS.MasonryGrid.masonry('layout'); // tell masonry to layout again
Tuttavia, in alcune versioni di Safari, che non avrebbe funzionato, e abbiamo dovuto fare questo, invece:
// domData is HTML string from the server
// IMJS is our global variable that we use for globals and lookups
IMJS.MasonryGrid.masonry('destroy'); // destroy the grid
$("#divTemplateCategoryName").after(domData); // insert new HTML
InitMasonry(); // re-do our entire masonry init
Perché io non ho il tempo per rintracciare tutte le versioni del browser che potrebbero essere interessati da questo bug, sono passato a quest'ultimo metodo per tutti i browser.
fonte
2016-08-22 17:14:32
Si prega di aggiungere uno screenshot - il tuo link è rotto. – opyate