Jquery ładuje masonry jeden na drugim po zaktualizowaniu div Ajax


Używam Ajax do aktualizacji div, który zawiera obrazy. Używam masonry, aby początkowo dodać układ.
Następnie wywołanie ajax zwraca wartość js, która aktualizuje div za pomocą metody html (). Teraz, gdy to się kończy, wzywam
masonry ('reloadItems')
. Ale murarstwo ładuje wszystkie obrazy jeden na drugim. Po zmianie rozmiaru strony działa. Próbowałem ręcznie wymusić zmianę rozmiaru strony, ale to nie zmusiło murarza do wprowadzenia poprawek.
JS:
$('#timerange-select, #category_select').bind('change', function() {
form=$('#images-filter-form');
$.get(form.action, form.serialize(),function(){
var $container = $('#images_container');
$container.imagesLoaded(function(){$container.masonry('reloadItems');});
$(window).trigger('resize');
}, 'script');
});

Odpowiedź OKay na to żądanie AJAX to:
$('#images_container').html('<%= escape_javascript(render("shared/random_issues")) %>');

Dlatego nie dodaję zdjęć. Dokładnie wymieniam pojemnik.

W rzeczywistości są to 10 obrazów załadowanych jeden na drugi.
EDYCJA: Zobacz
[url=http://stackoverflow.com/questions/17697223/masonry-images-overlapping-above-each-other/17697495?noredirect=1#17697495]http://stackoverflow.com/quest ... 97495[/url]
dla css i html.
Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Ok, wygląda na to, że rozwiązałem ten problem.
Otrzymałem obiekt murarski z:
var masonry = $('#issue_container').data('masonry');

Teraz przy użyciu tej metody wywołałem
reloadItems ()
, a następnie
layout ()
. Po pierwszym wywołaniu metody każdy element jest układany jeden na drugim w jednej płytce, a następnie po wywołaniu funkcji layout () powstaje ładny układ murarski. Animacja przejścia z lewego górnego rogu do ładnego układu również wydaje się fajna: D.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Właśnie rozwiązałem podobne pytanie. Miałem zewnętrzny element div (otaczający kontener murowany), który był ustawiony na
{display: none}
w CSS, a następnie stał się widoczny później za pomocą
$ ('# ...') .show () ;
miałem ten sam problem. Kiedy kontener div + staje się widoczny po raz pierwszy, wszystkie elementy nakładają się. Następnie, po zmianie rozmiaru okna, rysuje się ono ponownie poprawnie.
Wydawało się, że problem polegał na tym, że kiedy elementy były tworzone po raz pierwszy, rozmiar div wynosił zero (powód ustawienia
display: none
), a podczas wyświetlania Div (
.show ();
) elementy są już renderowane dla kontenera o zerowej wysokości. Stąd zbieg okoliczności.
Naprawiłem to, uniemożliwiając inicjalizację układu, dopóki nie będzie widoczny
$myContainer = $('#myTiles');
$myContainer.masonry({
itemSelector: '.myTile',
isInitLayout: false
});

a następnie wywołaj układ później (w moim przypadku po kliknięciu przycisku) za pomocą
$myContainer.masonry();

Sprawdziłem twój kod i nie mogłem odtworzyć problemu po mojej stronie, używając ustawień css/skryptu ... ale pomyślałem, że podzielę się moim rozwiązaniem, jeśli to pomoże.

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się