Question

我已经使用boostrap对此代码进行了快速编码：http://alexisgargaloni.fr/archive/ 它可以完美工作，但是出于某些原因，我认为最好用砖石砌成图片网格系统。所以我已经在代码中实现了Masonry，但是由于某种原因，它看起来很小：http://alexisgargaloni.fr/archive/index%20copie.html

有人有主意吗？

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="keywords" content=" design, concept, print, affichage, web, web design, identity, graphic design, graphisme, graphic, poster, duperre">
    <meta name="description" content="Graphic design student at the Ecole Duperré Paris.">

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">

    <title></title>
</head>

<body>
    <div class="container-fluid">
        <div class="grid">
            <div class="grid-sizer col-sm-3">
            
                <!-- raynox du707TCH 1200 -->
            <div class="grid-item col-sm-4">
            <div class="grid-item-content">

                <div id="carouselraynoxdu707TCH1200" class="carousel" data-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img class="d-block w-100" src="images/raynoxdu707TCH1200_noroll.jpg" alt="">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="images/raynoxdu707TCH1200_front.jpg" alt="">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="images/raynoxdu707TCH1200_wroll.jpg" alt="">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="images/raynoxdu707TCH1200_closed.jpg" alt="">
                        </div>
                    </div>

                    <!-- Controls -->
                    <a class="carousel-control-prev" href="#carouselraynoxdu707TCH1200" data-slide="prev">
                        <i class="cursor-icons">keyboard_arrow_left</i>
                    </a>
                    <a class="carousel-control-next" href="#carouselraynoxdu707TCH1200" data-slide="next">
                        <i class="cursor-icons">keyboard_arrow_right</i>
                    </a>
                </div>
                <p> Raynox DU707TCH 1200</p>
</div>
            </div>

            <!-- kahnel koilmatic sd8 -->
            <div class="grid-item col-sm-4">
                <div class="grid-item-content">
                <div id="carouselkahnelkoilmaticsd8" class="carousel" data-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img class="d-block w-100" src="images/kahnelkoilmaticsd8_box_front.jpg" alt="">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="images/kahnelkoilmaticsd8_box_side.jpg" alt="">
                        </div>
                    </div>

                    <!-- Controls -->
                    <a class="carousel-control-prev" href="#carouselkahnelkoilmaticsd8" data-slide="prev">
                        <i class="cursor-icons">keyboard_arrow_left</i>
                    </a>
                    <a class="carousel-control-next" href="#carouselkahnelkoilmaticsd8" data-slide="next">
                        <i class="cursor-icons">keyboard_arrow_right</i>
                    </a>
                </div>
                <p> Kahnel koilmatic SD8</p>
                </div>
            </div>
            
            <!-- super 8 film roll -->
           <div class="grid-item col-sm-4">
               <div class="grid-item-content">
                <div id="carouselsuper8filmroll" class="carousel" data-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img class="d-block w-100" src="images/super8filmroll.jpg" alt="">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="images/super8filmroll_closed.jpg" alt="">
                        </div>
                    </div>

                    <!-- Controls -->
                    <a class="carousel-control-prev" href="#carouselsuper8filmroll" data-slide="prev">
                        <i class="cursor-icons">keyboard_arrow_left</i>
                    </a>
                    <a class="carousel-control-next" href="#carouselsuper8filmroll" data-slide="next">
                        <i class="cursor-icons">keyboard_arrow_right</i>
                    </a>
                </div>
                <p> Super 8 film roll</p>
               </div>
            </div>
            
            <!-- rollei P3250 -->
           <div class="grid-item col-sm-4">
               <div class="grid-item-content">
                <div id="carouselrolleiP3250" class="carousel" data-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img class="d-block w-100" src="images/rolleiP3250_front.jpg" alt="">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="images/rolleiP3250_side.jpg" alt="">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="images/rolleiP3250_top.jpg" alt="">
                        </div>
                    </div>

                    <!-- Controls -->
                    <a class="carousel-control-prev" href="#carouselrolleiP3250" data-slide="prev">
                        <i class="cursor-icons">keyboard_arrow_left</i>
                    </a>
                    <a class="carousel-control-next" href="#carouselrolleiP3250" data-slide="next">
                        <i class="cursor-icons">keyboard_arrow_right</i>
                    </a>
                </div>
                <p> Rollei P3250</p>
               </div>
            </div>
                
                <!-- rollei P3250 -->
           <div class="grid-item col-sm-4">
               <div class="grid-item-content">
                <div id="carouselrolleiP3250" class="carousel" data-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img class="d-block w-100" src="images/rolleiP3250_front.jpg" alt="">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="images/rolleiP3250_side.jpg" alt="">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="images/rolleiP3250_top.jpg" alt="">
                        </div>
                    </div>

                    <!-- Controls -->
                    <a class="carousel-control-prev" href="#carouselrolleiP3250" data-slide="prev">
                        <i class="cursor-icons">keyboard_arrow_left</i>
                    </a>
                    <a class="carousel-control-next" href="#carouselrolleiP3250" data-slide="next">
                        <i class="cursor-icons">keyboard_arrow_right</i>
                    </a>
                </div>
                <p> Rollei P3250</p>
               </div>
            </div>
                
                <!-- rollei P3250 -->
           <div class="grid-item col-sm-4">
               <div class="grid-item-content">
                <div id="carouselrolleiP3250" class="carousel" data-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img class="d-block w-100" src="images/rolleiP3250_front.jpg" alt="">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="images/rolleiP3250_side.jpg" alt="">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="images/rolleiP3250_top.jpg" alt="">
                        </div>
                    </div>

                    <!-- Controls -->
                    <a class="carousel-control-prev" href="#carouselrolleiP3250" data-slide="prev">
                        <i class="cursor-icons">keyboard_arrow_left</i>
                    </a>
                    <a class="carousel-control-next" href="#carouselrolleiP3250" data-slide="next">
                        <i class="cursor-icons">keyboard_arrow_right</i>
                    </a>
                </div>
                <p> Rollei P3250</p>
               </div>
            </div>
                
                <!-- rollei P3250 -->
           <div class="grid-item col-sm-4">
               <div class="grid-item-content">
                <div id="carouselrolleiP3250" class="carousel" data-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img class="d-block w-100" src="images/rolleiP3250_front.jpg" alt="">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="images/rolleiP3250_side.jpg" alt="">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="images/rolleiP3250_top.jpg" alt="">
                        </div>
                    </div>

                    <!-- Controls -->
                    <a class="carousel-control-prev" href="#carouselrolleiP3250" data-slide="prev">
                        <i class="cursor-icons">keyboard_arrow_left</i>
                    </a>
                    <a class="carousel-control-next" href="#carouselrolleiP3250" data-slide="next">
                        <i class="cursor-icons">keyboard_arrow_right</i>
                    </a>
                </div>
                <p> Rollei P3250</p>
               </div>
            </div>
                
                <!-- rollei P3250 -->
           <div class="grid-item col-sm-4">
               <div class="grid-item-content">
                <div id="carouselrolleiP3250" class="carousel" data-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img class="d-block w-100" src="images/rolleiP3250_front.jpg" alt="">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="images/rolleiP3250_side.jpg" alt="">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="images/rolleiP3250_top.jpg" alt="">
                        </div>
                    </div>

                    <!-- Controls -->
                    <a class="carousel-control-prev" href="#carouselrolleiP3250" data-slide="prev">
                        <i class="cursor-icons">keyboard_arrow_left</i>
                    </a>
                    <a class="carousel-control-next" href="#carouselrolleiP3250" data-slide="next">
                        <i class="cursor-icons">keyboard_arrow_right</i>
                    </a>
                </div>
                <p> Rollei P3250</p>
               </div>
            </div>
            </div>   
        </div>

<br>
        <br>
        <br>
        <div class="row index justify-content-between">
            <div class="col-auto">
                <a href="index.html">Archive</a>
            </div>
            <div class="col-auto">
                <a href="about.html">About</a>
            </div>
        </div>
    </div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script type="text/javascript">
    $('.grid').masonry({
        itemSelector: '.grid-item', // use a separate class for itemSelector, other than .col-
        columnWidth: '.grid-sizer',
        percentPosition: true
    });
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
    <script> var $grid = $('.grid').imagesLoaded( function() {
  // init Masonry after all images have loaded
  $grid.masonry({
    // options...
  });
}); </script>
</body>

</html>

Answer 1

您应该首先使Masonry布局正常工作，然后再尝试将其装配到引导容器中，以免两个布局系统出现任何相互干扰的问题。

我将您的HTML精简到了砌筑工作所需的最低限度，同时还删除了轮播。这就是我所说的“最小，完整且可验证的示例”：

<!DOCTYPE html>
<html>

    <head>
        <style>
            .grid-item { width: 200px; }
            .grid-item img { width: 90%; }
        </style>
    </head>

    <body>
        <div class="grid">
            <div class="grid-item">
                <img class="d-block w-100" src="http://alexisgargaloni.fr/archive/images/raynoxdu707TCH1200_wroll.jpg" alt="">
                <p> 1 Raynox DU707TCH 1200</p>
            </div>
            <div class="grid-item">
                <img class="d-block w-100" src="http://alexisgargaloni.fr/archive/images/raynoxdu707TCH1200_wroll.jpg" alt="">
                <p> 2 Raynox DU707TCH 1200</p>
            </div>
            <div class="grid-item">
                <img class="d-block w-100" src="http://alexisgargaloni.fr/archive/images/raynoxdu707TCH1200_wroll.jpg" alt="">
                <p> 3 Raynox DU707TCH 1200</p>
            </div>
            <div class="grid-item">
                <img class="d-block w-100" src="http://alexisgargaloni.fr/archive/images/raynoxdu707TCH1200_wroll.jpg" alt="">
                <p> Raynox DU707TCH 1200</p>
            </div>
        </div>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>    
        <script type="text/javascript">
            $('.grid').masonry({
                columnWidth: 200
            });
        </script>

    </body>

</html>

在HTML的底部，您使用两种不同的样式对Masonry代码进行了两次初始化。只需一个：

<script src="js/masonry.pkgd.min.js"></script>
<script type="text/javascript">
    $('.grid').masonry({
        itemSelector: '.grid-item',
        columnWidth: '.grid-sizer',  <<-- I don't think this will work, for now use a number
        percentPosition: true
    });
</script>

...

<script src="js/imagesloaded.pkgd.min.js"></script>
    <script> var $grid = $('.grid').imagesLoaded( function() {
  // init Masonry after all images have loaded
  $grid.masonry({
    // options...
  });
}); </script>

在documentation中说

所有项目的大小均由CSS处理。

但是我找不到您的CSS中指定的大小。

一旦基本的砌体工作了，就开始添加旋转木马，等等，看看它是否破裂。然后，您可以一次修复一件事。

您在这里混合使用两种布局系统，一种基于列（Bootstrap），另一种使用“最佳匹配”系统。如果所有图像的大小和方向都相同，则将砖石布局强制插入固定宽度的Bootstrap容器时，砖石布局不会有太大帮助。

Answer 2

回顾一下Masonry网站上给出的示例后，我发现div“ grid-sizer col-sm-3”必须立即关闭，且其中不包含任何内容，而之后再将所有元素都包含在内。问题解决了。

靴子上的砌体网格

2 个答案: