Я нашел этот шаблон, который демонстрирует проблему, с которой я сталкиваюсь с jquery masonry и макетом изображений. Взгляните на этот шаблон бутстрапа 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");
Любая идея, почему это происходит и как я могу ее исправить?