Есть такой простой код. При загрузке страницы картинки накладываются одна на другую. Если, когда уже страница загрузилась, поменять разрешение у браузера, то становится всё нормально, фото расставляются как надо. Подскажите, в чём проблема, пожалуйста. Причём, если сделать фото одинакового размера, то всё нормально.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Masonry — JQuery плагин для динамического отображения контента</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.masonry.min.js"></script> <!-- подключаем сам плагин -->
<script type="text/javascript" src="modernizr-transitions.js"></script> <!-- подключаем плагин заставляющий работать css transitions в браузерах не поддерживающих css3 -->
<style type="text/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;
}
</style>
<script type="text/javascript">
function ImagesStart(id) {
var Images = [
"photes/сайт002",
"photes/сайт003",
"photes/сайт004",
"photes/сайт005",
"photes/сайт006",
"photes/сайт007",
"photes/сайт008",
"photes/сайт009",
"photes/сайт010",
"photes/сайт011",
"photes/сайт012",
"photes/сайт014",
"photes/сайт015",
"photes/сайт016",
"photes/сайт017",
"photes/сайт018",
"photes/сайт019",
"photes/сайт020",
"photes/сайт021",
"photes/сайт022",
"photes/сайт023",
"photes/сайт024",
"photes/сайт025",
"photes/сайт026",
"photes/сайт027",
"photes/сайт028",
"photes/сайт029",
"photes/сайт030",
"photes/сайт031",
"photes/сайт032",
];
for (var i = 0; i < Images.length; i++) {
$("#" + id).append ("<a href = '"+ Images[i] +".jpg'class = 'item1'><img id = '"+i+"' src = '"+Images[i]+"мал.jpg'class = 'item' onmouseover = 'over(this)' onmouseout = 'out(this)'></a>")
}
}
$(document).ready(function(){
ImagesStart("container");
$('#container').masonry({ // выбираем элемент-контейнер в котором расположены блоки для динамической верстки
itemSelector: '.item', // указываем класс элемента являющегося блоком в нашей сетке
singleMode: false, // true - если у вас все блоки одинаковой ширины
resizeable: true, // перестраивает блоки при изменении размеров окна
isAnimated: !Modernizr.csstransitions // анимируем перестроение блоков при помощи css transitions и Modernizr
});
});
</script>
</head>
<body>
<h3>Masonry — JQuery плагин для динамического отображения контента</h3>
<a href="masonry_demo.zip">скачать демо</a> / <a href="http://masonry.desandro.com/index.html">страница плагина с примерами и документацией</a>
<section id="container">
</section>
</body>
</html>