packery - 使用通过 PHP 提供的图像的 Packery 和 ImagesLoaded 的图像重叠问题

Question

现在可能已经太久了，但似乎无法让 packery/imagesLoaded 组合与我的 Kirby 网站一起使用。我得到了臭名昭著的图片重叠。以下是我在标签中输入 imageURL 的地方。

<div class="grid">
  <div class="grid-sizer"></div>
  <div class="gutter-sizer"></div>

  <?php foreach($projects as $project): 

      $project_image = $project
        ->files()
        ->filterBy('type', 'image')
        ->shuffle()
        ->first();
  ?>

  <div class="grid-item">
  <?php 
    <img src="<?= $project_image->url() ?>" alt="<?= $project->title()->html() ?>" class="showcase-image" /> 
  ?>
    <div class="showcase-name left">
        <p class="showcase-title"><?= $project->title()->html() ?></p>
        <p class="showcase-occupation"><?= $project->occupation()->html() ?></p>
    </div>

  </div>

  <?php endforeach ?>

这是我在页脚中初始化 packery 和 imagesLoaded 的地方：

 <script>
    // init Packery


    $(document).ready(function() {
      var $grid = $('.grid').packery({
        itemSelector: '.grid-item',
        gutter: '.gutter-sizer',
        columnWidth: '.grid-sizer',
        percentPosition: true
      });
      // layout Packery after each image loads
      $('.grid').imagesLoaded().progress( function() {
        $('.grid').packery();

        });
      });

  </script>

I know there a a bunch of people with the same issue and I have tried some other solutions like this one but no avail. Does it have to do with the manner in which I serve the images? Any info and help is greatly appreciated.

Answer 1

这对我来说就像一个魅力！

<script src="/assets/templates/site/js/imagesloaded.pkgd.js" type="text/javascript"></script>
<script src="/assets/templates/site/js/packery.pkgd.js" type="text/javascript"></script>

<script>
var $grid = $('.packery').packery({});

$grid.imagesLoaded().progress( function() {
      $grid.packery();
    });

</script>