Изображения каретки jquery перекрываются до тех пор, пока не будет выполнено изменение размера страницы

Я нашел этот шаблон, который демонстрирует проблему, с которой я сталкиваюсь с макетом jquery и макетом изображений. Взгляните на эту страницу шаблона бутстрапа twitter:

В первый раз, когда страница загружается, все изображения сложены друг на друга до тех пор, пока не будет обновлено или изменено значение страницы. Изображения отображаются корректно.

Вот мой HTML и jQuery, которые имеют ту же проблему:

HTML

<div class="gallery-masonry masonry" style="position: relative; min-height:100px; height: auto;"> <div id="loading">Loading ...</div> </div>

JQuery

 $.post("functions/photo_functions.php", { f: 'getallphotos'}, function(data) { $('#loading').hide(); if(data) { $.each(data.images, function(i, image) { var img_block = '<div class="item masonry-brick" style="position: absolute; top: 0px; left: 0px;">' + '<a href="#" class="thumbnail"><img src="'+image.url+'" alt=""></a>' + '<div class="actions">' + '<a title="" href="#" class="tip-top" data-original-title="Edit"><i class="icon-pencil icon-white"></i></a>' + '<a title="" href="#" class="tip-top" data-original-title="Remove"><i class="icon-remove icon-white"></i></a>' + '</div>' + '</div>'; $(".gallery-masonry").append(img_block); }); $('.gallery-masonry').masonry({ itemSelector: '.item', isAnimated: true, isFitWidth: true }); } }, "json");

Любая идея, почему это происходит и как я могу это исправить?

Related of "Изображения каретки jquery перекрываются до тех пор, пока не будет выполнено изменение размера страницы"

Используйте imagesLoaded () для запуска кладки после загрузки всех изображений. ( imagesLoaded() предоставляется скриптом http://github.com/desandro/imagesloaded .)

 $('.gallery-masonry').imagesLoaded( function(){ $('.gallery-masonry').masonry({ itemSelector: '.item', isAnimated: true, isFitWidth: true }); });

В принятом ответе отсутствуют шаги. Итак, вот шаг за шагом.

Перейдите в обработанное изображениями репо и загрузите уменьшенную версию на странице https://github.com/desandro/imagesloaded/blob/master/imagesloaded.pkgd.min.js .
Добавьте эту библиотеку в свой проект.
В нижней части страницы вызывается файл

“ `[Настроить путь к вашим файлам javascript]

 <script src="/js/masonry.pkgd.min.js"></script> <script src="/js/imagesloaded.pkgd.min.js"></script> <script> $('.gallery-masonry').imagesLoaded( function(){ $('.gallery-masonry').masonry({ itemSelector: '.item', isAnimated: true, isFitWidth: true }); }); </script>