Пакет и изображения Загруженный плагин не работает?

Question

Я использую Packery на веб-сайте и скачал imagesLoaded, но мои изображения пересекаются при загрузке страницы. Веб-сайт можно увидеть здесь, и мой код, как показано ниже:

$(document).ready(function() {
var $container = $container.packery({
   itemSelector: "packery-item"
});
$container.imagesLoaded( function() {
   container.packery();
});
});

Любая помощь будет принята с благодарностью.

РЕДАКТИРОВАТЬ: HTML-код выглядит следующим образом:

<div class="packery js-packery">

<div class="packery-item item"><img src="imgs/cdg5.jpg"></img></div>
<div class="packery-item text"><img src="imgs/text1.png"></img></div>
<div class="packery-item item w2"><img src="imgs/cdg3.jpg"></img></div>
<div class="packery-item gif"><img src="imgs/gif1.gif"></img></div>

</div>

и т.п.

Answer 1

Проблема в том, что упаковка выполняется перед загрузкой изображений в ваших элементах. Из-за этого Packery не может знать, насколько высоким должен быть элемент.

Решением для этого является проверка с помощью jquery, загружены ли все изображения, а затем выполнение Packery. Я нашел несколько способов сделать это, решение здесь кажется хорошим.

Другой способ исправить это - дать изображениям фиксированную высоту в CSS или с атрибутом высоты. Однако вы можете сделать это только тогда, когда изображения имеют одинаковую высоту или когда вы знаете высоту заранее.

Обновление: это пример кода для первого решения:

$(document).ready(function(){

    var cnt = $("img").length;
    $("img").one("load", function() {
        cnt--;

        // If all images are loaded, init Packery
        if (cnt === 0)
        {
            $(".js-packery").packery({
               itemSelector: "packery-item"
            });
        }

    }).each(function() {
      if(this.complete) $(this).load();
    });

});