用于在 html 和 css 中创建图片库的非尺寸钻石设计

Question

我正在尝试创建一个钻石设计以用作图片库。

我的预期设计如下图：

如您所见，设计由许多具有三种不同尺寸的钻石组成（75px，150px 或 225px) 在具有特定大小的容器（例如 Div 元素）中。

我尝试了很多方法来创建它，但我无法做出准确的设计。

我测试的一种方法是使用 Masonry jquery plugin 创建一个简单的网格，然后将父容器旋转 45 度。

$grid = $('.grid').masonry({
    itemSelector: '.grid-item',
    columnWidth: 75,
     gutter: 5
});

#gallery {
  height: 400px;
  border: 1px solid red;
}
#gallery .grid {
  width: 500px;
  height: 600px;
  transform: rotate(45deg);
  border: 1px solid blue;
}
#gallery .grid .grid-item {
  width: 75px;
  border: 1px solid green;
  height: 75px;
}
#gallery .grid .grid-item-width2 {
  width: 150px;
  height: 150px;
}
#gallery .grid .grid-item-width3 {
  width: 225px;
  height: 225px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://npmcdn.com/masonry-layout@4.1.0/dist/masonry.pkgd.js"></script>

<div id="gallery">
    <div class="grid">
        <div class="grid-item grid-item-width2"></div>
        <div class="grid-item"></div>
        <div class="grid-item grid-item-width2"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item grid-item-width2"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item grid-item-width2"></div>
        <div class="grid-item"></div>
        <div class="grid-item grid-item-width2"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item grid-item-width2"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
    </div>
</div>

但它有很多问题，钻石之间有很多缝隙，可能是主容器角落的空白，甚至可能有一些钻石完全放在容器外。

什么是解决方案？我怎样才能创建出没有上述问题的设计？

Answer 1

添加边距并隐藏溢出

$grid = $('.grid').masonry({
        itemSelector: '.grid-item',
        columnWidth: 75,
        gutter: 10

    });

#gallery {
  height: 400px;
  border: 1px solid red;
overflow:hidden;
}
#gallery .grid {
  width: 500px;
  height: 600px;
  transform: rotate(45deg);
  border: 1px solid blue;
}
#gallery .grid .grid-item {
  width: 75px;
  border: 1px solid green;
  height: 75px;
margin:3px;
}
#gallery .grid .grid-item-width2 {
  width: 150px;
  height: 150px;
margin:3px;
}
#gallery .grid .grid-item-width3 {
  width: 225px;
  height: 225px;
margin:3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://npmcdn.com/masonry-layout@4.1.0/dist/masonry.pkgd.js"></script>

<div id="gallery">
 <div class="grid">
  <div class="grid-item grid-item-width2"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item-width2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item-width2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
        <div class="grid-item grid-item-width2"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item-width2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item-width2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
    </div>
</div>

Answer 2

实际上菱形之间的间隙是“border”的结果。当您使用边框时，它会增加元素的大小并且它们不适合容器（您可以禁用转换以查看）。你可以考虑使用“outline”而不是"border"来解决这个问题。

另外，为了填充空角，您需要添加更多项目（钻石）并增加网格的大小。

$grid = $('.grid').masonry({
        itemSelector: '.grid-item',
        columnWidth: 75
    });

#gallery {
  height: 400px;
  outline: 1px solid red;
}
#gallery .grid {
  width: 500px;
  height: 600px;
  transform: rotate(45deg);
  outline: 1px solid blue;
}
#gallery .grid .grid-item {
  width: 75px;
  outline: 1px solid green;
  height: 75px;
}
#gallery .grid .grid-item-width2 {
  width: 150px;
  height: 150px;
}
#gallery .grid .grid-item-width3 {
  width: 225px;
  height: 225px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://npmcdn.com/masonry-layout@4.1.0/dist/masonry.pkgd.js"></script>

<div id="gallery">
 <div class="grid">
  <div class="grid-item grid-item-width2"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item-width2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item-width2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
        <div class="grid-item grid-item-width2"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item-width2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item-width2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
    </div>
</div>

用于在 html 和 css 中创建图片库的非尺寸钻石设计

Non-sized Diamonds design to create an Image gallery in html and css

javascript

jquery

html

css

jquery-masonry