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.
Nie znaleziono powiązanych wyników
Zaproszony:
Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się
2 odpowiedzi
Anonimowy użytkownik
Potwierdzenie od:
Otrzymałem obiekt murarski z:
var masonry = $('#issue_container').data('masonry');Teraz przy użyciu tej metody wywołałem, a następnie. 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
Potwierdzenie od:
{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), a podczas wyświetlania Div () 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ą
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.