Блоки "плиткой" при помощи "Msonry".
Добрый день, сразу хочу сказать, что я не знаю js, и по этому прошу вас о помощи. Я вот уже как второй день пытаюсь подключить себе "Masonry" и "imagesLoaded", но так как я это делаю впервые, мне это не поддается.
Сейчас у меня такой код:
<script type="text/javascript" src="/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/js/masonry.pkgd.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#page').masonry({
itemSelector: '#post',
isResizable: true,
});
});
</script>
и
#page {
width: 100%;
}
#post {
width: 23%;
background: #fff;
padding: 2%;
margin: 15px;
}
В итоге, если в посте изображение, то они налезают друг на друга, на сайте плагина написано, что нужно подключить "imagesLoaded". К сожалению у меня не получается его подключить, так как нет знаний в этой области. Похоже, что там все предельно просто. Так что, если бы кто-то был столь любезен, и помог мне с этой незатейливой задачей (подключить "imagesLoaded"), я был бы крайне благодарен. http://masonry.desandro.com/ http://masonry.desandro.com/appendix.html#imagesloaded http://desandro.github.io/imagesloaded/ |
Alexander Transparent,
для блоков нельзя использовать один и тотже id Цитата:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#page {
width: 100%;
}
.post {
width: 23%;
background: #fff;
padding: 2%;
margin: 15px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://masonry.desandro.com/masonry.pkgd.js"></script>
<script src="http://desandro.github.io/imagesloaded/imagesloaded.pkgd.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var $container = $('#page').masonry({
itemSelector: '.post',
isResizeBound: false
});;
$container.imagesLoaded( function() {
$container.masonry();
});
});
</script>
</head>
<body>
<div id="page">
<div class="post"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt=""></div>
<div class="post"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt=""></div>
<div class="post"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt=""></div>
<div class="post"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt=""></div>
<div class="post"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt=""></div>
</div>
</body>
</html>
|
Рони, огромное вам спасибо!
|
рони, может быть Вы мне еще немного поможете? как сделать, чтобы вся это красота не была анимированная? (все двигается и ездит, особенно когда изменяешь размер страницы)
|
Alexander Transparent, так скрипт для этого и предназначен подстраиваться под размер страницы -- на всякий случай запятая ненужна в 28 строке
да и вся строка изменена -- взял у вас на самом деле иная опция - сделайте тоже будет подстраивать блоки только 1 раз http://masonry.desandro.com/options.html#isresizebound |
рони, простите, я не совсем точно выразил свою мысль.
У меня сейчас как на этом сайте: kristianhammerstad.com/ - изменяешь размер и все блоки летят в новое пространство. Я бы хотел сделать как здесь: halcyon-theme.tumblr.com/ - изменяешь размер, и без всякой анимации все блоки уже подстроились под новые размеры. |
Alexander Transparent,
время анимации параметр transitionDuration попробуйте прочесть документацию
{
itemSelector: '.post',
transitionDuration: '0'
}
|
рони, с этим кодом, при изменении окна, перед тем как новые посты займут новое пространство, происходит небольшая задержка в 0.5 - 1.0 секунды, только после этого они "прыгают" туда. Но мне и так пойдет^-^
Еще раз, большое Вам Спасибо, Вы мне очень помогли! |
| Часовой пояс GMT +3, время: 17:53. |