Problèmes avec jQuery.Masonry - jquery, html

J'ai un problème. Lorsque les chargements de page sont placés, les photos ne le sont pas et se superposent les unes aux autres.

CSS:

 body {background: #fefefe; color:#333; line-height:200%;}
.item {
float:left /* ОБЯЗАТЕЛЬНО задаем блокам float */;
border:1px solid black;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
}

JS:

function ImagesStart(id) {
var Images = [
"photes/сайт002",
"photes/сайт003",
"photes/сайт004",
"photes/сайт005",
"photes/сайт006",
];
for (var i = 0; i < Images.length; i++) {
$("#" + id).append("<img id = "" + i + "" src = "" + Images[i] + "мал.jpg"class = "item" onmouseover = "over(this)" onmouseout = "out(this)">")
}
}

$(document).ready(function() {
ImagesStart("container");
$("#container").masonry({
itemSelector: ".item",
singleMode: false,
resizeable: true,
//isAnimated: !Modernizr.csstransitions
});
});

Et capture d'écran.

Si vous démarrez pour changer la taille de la fenêtre du navigateur, tout va bien. Quel est le problème?

Réponses:

Vous devez utiliser le imagesLoaded plugin, qui retarde essentiellement le fonctionnement window.load, c'est-à-dire après le chargement de tous les actifs:

var $container = $("#container");

$container.imagesLoaded( function(){
$container.masonry({
itemSelector : ".box"
});
});

Pour ce faire, vous ne devez pas injecter des images DOM via js, mais mieux les fournir dans le document HTML d'origine.