javascript - 非尺寸钻石设计，用于在 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>

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

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

Answer 1

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

还需要添加更多元素(钻石)并增加网格的大小来填充空 Angular 。

$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>