Почему Masonry.js накладывает изображения друг на друга?

Question

[Даник Грачёв]

pixs.ru/showimage/modelspng_1248007_10124988.png
Первые изображения нормально отображаются, но последующие накладываются одна на другую.
Из-за чего это может быть?

<div id="container" class="js-masonry"
  data-masonry-options='{ "columnWidth": 100, "itemSelector": ".item" }'>
 <div class="container">
<div class="item">                              
 <a href="<?php echo $image; ?>" rel="lightbox[roadtrip]"/><img  src="<?php echo $image; ?>"/></li></a>
  </div></div></div>



CSS
#container{
width:600px;
}
.item { width: 25%; }
.item.w2 { width: 50%; }

Answer 1

[Вадим Гук]

Класная статья с решением
$(document).ready(function() {
$('#content').masonry({
columnWidth: 320,
itemSelector: '.item'
}).imagesLoaded(function() {
$('#content').masonry('reload');
});
});

У меня тот же вопрос... никак не могу решить.
Блин не тот адрес набрал=)) Вот и решение=) Немного дергаеться но зато никаких помех=)) Хотя вместо начала $(document).ready() напиши $(window).load()

Вот мой робочий код, хотя тут ищо пишут нада установить "Modernizr":
$(window).load(function() {
var container = document.querySelector('#posts');
var msnry = new Masonry( container, {
itemSelector: '.item-post',
singleMode: false,
// true - если у вас все блоки одинаковой ширины
isResizable: true,
isFitWidth: true,
// перестраивает блоки при изменении размеров окна
isAnimated: !Modernizr.csstransitions
// опции анимации - очередь и продолжительность анимации
}).imagesLoaded(function() {
$('#posts').masonry('reload');
});
});

Comments

[420873535]

Спасибо! "Хотя вместо начала $(document).ready() напиши $(window).load()" - выручили! )

[Чёкатилло]

Здравствуйте!
Присоединяйтесь к похожему вопросу: Подгруженным превью в сетке masonry не назначаются положения в блоке?
Замаялся уже

Будьте любезны =)

Answer 2

[Максим Девда]

Решил данную проблему таким образом:

var $container = $('#masonry');
    $container.imagesLoaded( function() {
        $container.masonry({
            itemSelector: '.list-all-video__item'
        });
        $container.addClass('loaded');
    });

#masonry {
    opacity: 0;
    transition: opacity 0.4s ease-out 0s;
}
#masonry.loaded {
    opacity: 1;
}

Comments

[Galyanoff]

Спасибо! Только так заработало)

Answer 3

[Oleg Ko]

1.Пробуйте закрыть дивы сразу :

<div class="item">
      <img src="img/single-4.jpg" alt="" />
    </div>

2.Может дело в скрипте?
3. Тут хороший урок и исходник
www.creativebloq.com/css3/get-started-jquery-mason...

Comments

[Даник Грачёв]

1) не помогло.вообще оно странно работает, через раз. Т.е. при первой загрузке страницы оно всё съезжается, если страницу обновить, то всё ок, если снова обновить, всё опять съезжает, и так постоянно.
2)скрипт работает на другом проэкте.
3) изучю сейчас

Answer 4

[Даник Грачёв]

Нашёл проблему. Дело в том, что из-за сырости masonry.js и другой магии, masonry строит страницу из тех картинок, которые успели прогрузится за 1 секунду. Увеличивать время загрузки - не вариант.
Есть выход - ImagesLoaded. Но есть беда, я подключаю (кажись правильно)

wp_enqueue_script('imagesloaded-pkgd-min-js', THEMEROOT . '/js/imagesloaded.pkgd.js', array('jquery'), false, true);

но не знаю что дальше с этим делать.
Как правильно вызвать его и где?

Comments

[PhpDarkMag]

вызвать нада после подключениия jquery masonry & imagesLoader
$('#content').masonry({
columnWidth: 320,
itemSelector: '.item'
}).imagesLoaded(function() {
$('#content').masonry('reload');
});
});