наложение изображений с Masonry в WP

Я использую Masonry и WordPress, чтобы сделать небольшой проект для оценки изображений...

У меня проблема с Мэнсонри, изображения накладываются друг на друга.

http://postimg.org/image/kmvnzi7sh/

Вот решение, но я не понимаю, как его исправить. --> http://masonry.desandro.com/#imagesloaded

В шапке у меня так:

    <script src="http://code.jquery.com/jquery-2.1.1.min.js"> </script>

и в футере у меня есть это:

        <script type="text/javascript">
var container = document.querySelector('.span12');
var msnry = new Masonry( container, {
  // options
  itemSelector: '.item-grid'
});
</script>

Я точно не знаю, что с этим делать: masonry.desandro.com/appendix.html#imagesloaded

Кстати: я знаю, что есть несколько плагинов для WP, чтобы добиться того же эффекта, который я хочу, но я предпочитаю не использовать плагины.

Я надеюсь, что кто-то может помочь мне исправить это!

Благодарю вас!


javascript html jquery css masonry
person andresgl    schedule 04.08.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вам просто нужно включить скрипт imagesLoaded и инициализировать Masonry в обратном вызове imagesLoaded, например:

var container = document.querySelector('.span12'),
    msnry;

imagesLoaded( container, function() {
    msnry = new Masonry( container, {
      // options
      itemSelector: '.item-grid'
    });
});
person Vlad Cazacu    schedule 04.08.2014
comment
Спасибо за повтор, Влад Казаку, пробовал, не получается. Скриншот 1 --› postimg.org/image/mwf1s6ycl скриншот 2 --› postimg.org/image/79nsetkkl эффект масунства не работает (размещение элементов в оптимальном положении на основе доступной вертикальной космос) СПАСИБО!! - person andresgl; 04.08.2014