如何阻止砌体图像相互堆叠？

Question

我正在尝试创建一个基于 bootstrap 5 砖石示例的照片库，效果很好。我还用它实现了模态框，它也工作得很好。 简而言之，我唯一无法做到的就是加载 JS 图像，以在第一次加载时保持我的图像堆叠在彼此之上。 （刷新后它确实可以正常工作，因为可能是缓存的原因）

我很确定我的 JS 操作可能是错误的，但我无法弄清楚，而且我不想在完成线框之前进入 CSS，所以我陷入了困境。

请帮忙？

画廊的 html 部分（抱歉有点粗糙）：

<main class="contenu-blog"> <div class="container"> <div class="row grid" id="gallery">
        <div class="col-12 col-sm-6 col-lg-4 mb-4 gallery-item card-mason">
            <div class="card" type="button" data-bs-toggle="modal" data-bs-target="#modal-photo1">
                <img src="img/1.png">
            </div>
            <div class="modal fade" id="modal-photo1" tabindex="-1" aria-labelledby="modal-photoLabel1" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title fs-5" id="modal-photoLabel1">Chazay, Septembre 2023</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <img class="img-fluid" src="img/1.png">
                            <p></p>
                            <p></p>
                            <p></p>
                            <p></p>
                            <p></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="col-12 col-sm-6 col-lg-4 mb-4 gallery-item card-mason2">
            <div class="card" type="button" data-bs-toggle="modal" data-bs-target="#modal-photo2">
                <img src="img/2.jpg">
            </div>
            <div class="modal fade" id="modal-photo2" tabindex="-1" aria-labelledby="modal-photoLabel2" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title fs-5" id="modal-photoLabel2">MICTE</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <img class="img-fluid" src="img/2.jpg">
                            <p></p>
                            <p></p>
                            <p></p>
                            <p></p>
                            <p></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
</main>

....

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script> <script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script> <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> <script type="text/javascript" src="js/waitimg.js"></script> <script src="https://unpkg.com/scrollreveal"></script> <script type="text/javascript" src="js/scrollrev.js"></script>

masonry/imageLoad (js/waitimg.js) 的 JS 文件如下：

$('#gallery').imagesLoaded( function(){ $('#gallery').masonry({ itemSelector: '.gallery-item', percentPosition: true, isAnimated: true, isFitWidth: true }); });

每当我在谷歌浏览器或火狐浏览器中尝试它时，它也会给我错误代码：

未捕获的类型错误：h 不可迭代

在新的 n (imagesloaded.pkgd.min.js:12:433)

在 i.fn.imagesLoaded (imagesloaded.pkgd.min.js:12:4286)

在 waitimg.js:1:15

感谢您的时间和帮助！

Answer 1

我通过回退到版本 4 解决了这个问题。

改变：

  <script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js">

致：

  <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js">

版本 4 存在时间更长，也更成熟。它是为较旧的浏览器版本维护的。