Привет всем, у меня проблема с javascript-кладкой, вот код, это всего лишь тестовая часть, пожалуйста, помогите мне....
Я пробовал этот код, но это не работает, пожалуйста, помогите мне.. спасибо заранее..
любая помощь приветствуется...
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://masonry.desandro.com/jquery.masonry.min.js"> </script>
<script type="text/javascript" src="https://raw.github.com/desandro/imagesloaded/master/jquery.imagesloaded.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var $container = $('.portfolio-container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.break',
columnWidth : 129
});
});
});
</script>
<style type="text/css">
.break {
float: left;
width: 129px;
margin: 3px;
background-color:blue;
}
.break1{height:30px;}
.break2{height:50px;}
.break3{height:20px;}
.break4{height:70px;}
</style>
</head>
<body>
<div class="portfolio-container">
<?php
for ($i=1; $i<9; $i++){
?>
<div class="break1 break" >
</div><div class="break2 break" >
</div><div class="break3 break">
</div><div class="break4 break" >
</div>
<?php } ?>
</div>
</body>
</html>
Проблема в том, что оба пути /URL, которые вы использовали (для кладки и плагинов с изображениями), ошибочны.
Используйте URL-адреса из CDN, если хотите
<script src="http://cdnjs.cloudflare.com/ajax/libs/masonry/3.1.1/masonry.pkgd.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.0.4/jquery.imagesloaded.min.js"></script>
или загружать эти файлы и ссылаться на них.
Демо на странице http://jsfiddle.net/C2mCw/1/
Помимо неправильных URL-адресов, используемая columnWidth
опция columnWidth
должна учитывать полную ширину каждого элемента (включая paddings/marginins).
Итак, поскольку у вас есть margin:3px
.break
элементах .break
, вам придется учитывать 6 дополнительных пикселей
так что вы действительно должны установить его на 135 вместо 129
$container.masonry({
itemSelector : '.break',
columnWidth : 135
});
Демо на http://jsfiddle.net/C2mCw/2/
<script type="text/javascript" language="javascript">
?