Packery 和 Images 的图像重叠问题加载了通过 PHP 提供的图像

Question

可能已经

太久了，但似乎无法让包装/图像加载组合与我的 Kirby 网站一起使用。 我得到了臭名昭著的图片重叠。 以下是我在标签中输入图像URL的地方。

<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 ?>

这是我初始化包装和图像加载到页脚的地方：

 <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>

我知道有一群

人有同样的问题，我已经尝试了其他一些类似的解决方案，但无济于事。 这与我提供图像的方式有关吗？ 任何信息和帮助将不胜感激。

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>