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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="127f73617d7c606b3f7e736b7d676652263c233c22" rel="noreferrer noopener nofollow">[email protected]</a>/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

实际上，菱形之间的间隙是“边界”造成的。当您使用边框时，它会增加元素的大小，并且它们无法适合容器(您可以禁用转换来查看)。您可以考虑使用“轮廓”而不是“边框”来解决此问题。

此外，为了填充空 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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a7cac6d4c8c9d5de8acbc6dec8d2d3e79389968997" rel="noreferrer noopener nofollow">[email protected]</a>/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>