Question

我想制作一个照片网格（当前使用包装厂，但最好不要使用），以其可变大小的图像占据容器的整个宽度。我的问题是，因为图像的宽度各不相同-我在每行的末尾（行在不平坦的地方结束）出现白色间隙，而新照片/网格项不适合放置。这也会在调整屏幕大小时发生。关于如何使这些间隙消失/被图像吸收的任何建议？

我不想使用固定的列宽，我尝试使用背景图像而不是图像来尝试其他选项，但是图像被裁切了。

在代码笔https://codepen.io/hollyb/pen/JVEzYX上查看我的示例

下面的HTML

<div class="home-page-wrap">

        <div class="page-content">

            <div class="grid packery">
                <canvas></canvas>
              <div class="grid-item"><img src="https://picsum.photos/200/300" alt=""></div>
              <div class="grid-item grid-item--width2"><img src="https://picsum.photos/300/300" alt=""></div>
              <div class="grid-item"><img src="https://picsum.photos/400/300" alt=""></div>
              <div class="grid-item"><img src="images/skinnyimage2.jpg" alt=""></div>
              <div class="grid-item grid-item--width2"><img src="https://picsum.photos/300/300" alt=""></div>
              <div class="grid-item"><img src="https://picsum.photos/220/300" alt=""></div>
               <div class="grid-item"><img src="ihttps://picsum.photos/100/300" alt=""></div>
              <div class="grid-item grid-item--width2"><img src="https://picsum.photos/450/300" alt=""></div>
              <div class="grid-item"><img src="https://picsum.photos/600/300" alt=""></div>
              <div class="grid-item"><img src="https://picsum.photos/200/300" alt=""></div>

            </div> <!-- end grid -->

        </div> <!-- end page content -->

    </div> <!-- end page wrap -->


<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/packery@2/dist/packery.pkgd.js"></script>

.home-page-wrap {
  max-width: 1000px;
  margin: auto;
}

.grid-item {
    box-sizing: border-box;
    max-height: 300px;

}

img{
        max-height: 300px;

    }

我希望网格行的两边都在同一位置/在图像边缘完成，如果它们之间留有空白，则最好是相同的量

Answer 1

Package通过JS调用应用其自己的设置。示例中的JS调用将gutter设置为15（像素）。对于初学者，应将其设置为零以执行您希望执行的操作。我还建议您也设置percentPosition，因为我认为这是您要实现的目标。

这里是一个例子：

<script type='text/javascript'>
    $('.grid').imagesLoaded( function(){
        $('.grid').packery({
            itemSelector:'.grid-item',
            percentPosition:true,
            gutter:5
        });
    });
</script>

这应该覆盖您可能具有的所有css grid-item{margin:X;}设置，尽管以防万一，明智的做法是设置margin:0;。

希望这对您有帮助。

如何使用带有可变大小图像的包装工制作网格，每行末尾没有白色间隙

1 个答案: