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

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%; }
  • Вопрос задан
  • 12906 просмотров
Пригласить эксперта
Ответы на вопрос 4
Stiflerus
@Stiflerus
Саморазвитие мое все.
Класная статья с решением
$(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');
});
});
Ответ написан
Решил данную проблему таким образом:

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;
}
Ответ написан
urmanoid
@urmanoid
Thinker & doer
1.Пробуйте закрыть дивы сразу :

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



2.Может дело в скрипте?
3. Тут хороший урок и исходник
www.creativebloq.com/css3/get-started-jquery-mason...
Ответ написан
@dfoster Автор вопроса
Нашёл проблему. Дело в том, что из-за сырости masonry.js и другой магии, masonry строит страницу из тех картинок, которые успели прогрузится за 1 секунду. Увеличивать время загрузки - не вариант.
Есть выход - ImagesLoaded. Но есть беда, я подключаю (кажись правильно)
wp_enqueue_script('imagesloaded-pkgd-min-js', THEMEROOT . '/js/imagesloaded.pkgd.js', array('jquery'), false, true);

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
03 дек. 2021, в 22:18
1000 руб./за проект
03 дек. 2021, в 21:42
10000 руб./за проект