Laravel项目中Masonry.js布局偶发异常仅刷新可修复，如何解决？

问题根因 #

你遇到的偶发布局错乱是Masonry布局的典型问题：你使用了HTML属性自动初始化Masonry，初始化执行时网格内的图片还未加载完成，Masonry无法获取图片的实际高度，计算出的网格项位置错误。刷新页面时图片已经被浏览器缓存，加载速度远快于首次加载，Masonry初始化时能拿到正确的元素高度，所以布局恢复正常。

解决方案 #

你可以根据项目情况选择以下任意一种方案，也可以组合使用获得更稳定的效果：

• 方案1：手动初始化Masonry，等待所有图片加载完成后再执行初始化
  不要使用data-masonry属性自动初始化，改成手动调用初始化逻辑，配合imagesLoaded工具监听所有图片加载状态，全部加载完成后再初始化Masonry：

  <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
  <!-- 引入imagesLoaded工具 -->
  <script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
  <div class="grid products-by-room" style="margin-top: 8rem">
      @foreach ($rooms as $room)
         <div class="grid-item" data-category="{{ $room->data_category}}" style="border: 7px solid #fff">
             <a href="#zoomImg{{ $room->id }}" data-bs-toggle="modal" data-bs-target="#zoomImg{{ $room->id }}">
                 <div class="img-wrapper">
                     <img src="{{ $room->img }}" alt="" class="img-fluid shade">
                         <div class="overlay">
                         <i class="fa fa-search-plus icon"></i>
                     </div>
                 </div>
             </a>
             <div class="text-left mt-3 mb-5">
                 <p class="product-subtitle">{{ $room->name }}</p>
                 <h4 class="product-title">Shop the Look</h4>
                 <a class="product-price-link" href="#getPriceByRoom{{ $room->id }}" data-bs-toggle="modal" data-bs-target="#getPriceByRoom{{ $room->id }}">get price</a>
             </div>
         </div>
     @endforeach
  </div>
  <script>
  // 等待网格内所有图片加载完成后初始化Masonry
  const grid = document.querySelector('.grid');
  imagesLoaded(grid, function() {
    new Masonry(grid, {
      itemSelector: '.grid-item'
    });
  });
  </script>
  

• 方案2：给图片预设占位高度，避免加载后高度变化
  提前给每张图片设置固定的宽高比，使用CSS的aspect-ratio属性或者padding-top占位法，让图片在加载完成前就占据对应高度，Masonry初始化时就能拿到正确的尺寸：

  .img-wrapper {
    aspect-ratio: 替换为你的图片实际宽高比，例如3/4;
    width: 100%;
  }
  .img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  

• 方案3：每张图片加载完成后触发Masonry重新布局
  如果不想引入额外工具，可以监听每张图片的load事件，每次加载完成后调用Masonry的layout()方法重新计算布局：

  const msnry = new Masonry(grid, { itemSelector: '.grid-item' });
  // 监听所有图片加载事件
  document.querySelectorAll('.grid-item img').forEach(img => {
    img.addEventListener('load', () => {
      msnry.layout();
    });
  });
  

内容的提问来源于stack exchange，提问作者mlila_p