首次加载时的砌体布局问题

Question

我按照 Bootstrap 的文档将 Masonry-layout jQuery 与 Bootstrap 5 结合使用。我以前在 ACF 中继器领域使用过这个，没有任何问题。现在我在 ACF 画廊中使用它。

问题是，在第一次加载页面时，项目几乎显示在彼此之上。每次首次加载时，整个块的高度都是可变的。刷新页面后，画廊与砖石显示良好。

问题在于砌体，因为如果没有砌体，我就看不到这个问题。到目前为止我尝试过的：

将 ACF 图库更改为图像的 ACF 转发器字段
在 header.php 中添加了最新的 jQuery
禁用所有CSS

这个问题是一个错误吗？是以前看起来的还是知道的？

亲切的问候，

Answer 1

问题已通过使用另一个 javascript 解决。根据 Bootstrap 文档，我必须使用：

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/masonry.pkgd.min.js" async></script>

脚本。这失败了，所以我用了另一个

script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

。现在效果很好，问题已解决。

Answer 2

我对 [email protected]/dist/js/bootstrap.bundle.min.js 和 [email protected]/dist/masonry.pkgd.min.js 也有同样的问题。

问题是浏览器在加载我的 dom 中的图像之前就完成了库的加载。因此，砌体改变了布局，然后当浏览器完成加载图像时，布局被破坏。由于您的 dom 中也有图像，我认为我的解决方案可以帮助您。

我通过将库加载移动到 html 文档的末尾并添加图像预加载来解决这个问题。

第三步是定义图像的高度，以便在 ist 完全加载之前正确渲染 ist。

<head>
   <link rel="preload" as="image" type="image/webp" ref="img/image.webp">
</head>
<body>
   <div class="container">
      <div class="row" data-masonry='{"percentPosition": true }'>
         <div class="col-sm-4 col-md-3 py-2">
            <img src="img/image.webp" width="200" height="250">
         </div>
         {{/*  some more cloumns */}}
      </div>
   </div>
   <script src="[email protected]/dist/js/bootstrap.bundle.min.js"</script>
   <script src="[email protected]/dist/masonry.pkgd.min.js"</script>
</body>

Answer 3

@isherwood，Bootstrap V5。

通过将

data-masonry='{"percentPosition": true }

添加到

.row

包装器，将 Masonry 布局集成到 Bootstrap。

然后添加了这个

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>

到我的 header.php。

我已将必要的代码添加到我的行类中：

<div class="row" data-masonry='{"percentPosition": true }'>

Answer 4

你需要

imagesloaded

图书馆

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.pkgd.min.js"></script>

然后在所有图像加载后更新砌体布局。（这里我使用了

masonry

和

bootstrap_v5

）

var masonryRow = document.querySelector('.row[data-masonry]'); // Targeting the Masonry container
if (masonryRow) {
    imagesLoaded(masonryRow, function() {
        // Initialize Masonry after all images have loaded
        new Masonry(masonryRow, {
          itemSelector: '.col-12, .col-md-6, .col-lg-4, .col-xl-3', // Targeting the grid items
          percentPosition: true // Since you have 'percentPosition' in your data attribute
        });
    });

首次加载时的砌体布局问题

问题描述投票：0回答：4

4个回答

最新问题

首次加载时的砌体布局问题

问题描述 投票：0回答：4

4个回答

最新问题

问题描述投票：0回答：4