Форум

Alexander Transparent · #1 (**permalink**) 16.09.2013, 13:51

Добрый день, сразу хочу сказать, что я не знаю 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/

рони · #2 (**permalink**) 16.09.2013, 15:20

Alexander Transparent,
для блоков нельзя использовать один и тотже id

Сообщение от Alexander Transparent

itemSelector: '#post'

можно класс

<!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 · #3 (**permalink**) 16.09.2013, 22:56

Рони, огромное вам спасибо!

Alexander Transparent · #4 (**permalink**) 16.09.2013, 23:57

рони, может быть Вы мне еще немного поможете? как сделать, чтобы вся это красота не была анимированная? (все двигается и ездит, особенно когда изменяешь размер страницы)

рони · #5 (**permalink**) 17.09.2013, 00:45

Alexander Transparent, так скрипт для этого и предназначен подстраиваться под размер страницы -- на всякий случай запятая ненужна в 28 строке
да и вся строка изменена -- взял у вас на самом деле иная опция - сделайте тоже будет подстраивать блоки только 1 раз
http://masonry.desandro.com/options.html#isresizebound

Alexander Transparent · #6 (**permalink**) 17.09.2013, 11:01

рони, простите, я не совсем точно выразил свою мысль.
У меня сейчас как на этом сайте: kristianhammerstad.com/
- изменяешь размер и все блоки летят в новое пространство. Я бы хотел сделать как здесь: halcyon-theme.tumblr.com/ - изменяешь размер, и без всякой анимации все блоки уже подстроились под новые размеры.

рони · #7 (**permalink**) 17.09.2013, 13:44

Alexander Transparent,
время анимации параметр transitionDuration попробуйте прочесть документацию

{
      itemSelector: '.post',
      transitionDuration: '0'
    }

Alexander Transparent · #8 (**permalink**) 17.09.2013, 14:09

рони, с этим кодом, при изменении окна, перед тем как новые посты займут новое пространство, происходит небольшая задержка в 0.5 - 1.0 секунды, только после этого они "прыгают" туда. Но мне и так пойдет^-^
Еще раз, большое Вам Спасибо, Вы мне очень помогли!

Форум

Справочник

Discord чат

Курсы javascript