非尺寸钻石设计可在HTML和CSS中创建图像库

Question

我正在尝试创建一个Diamond设计，以用作图库。

我的预期设计就像下面的图片：

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

我尝试了许多方法来创建它，但是我无法完全进行此设计。

我测试的方法之一是使用Masonry jquery插件创建一个简单的网格，然后将父容器旋转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

实际上，钻石之间的间隙是“ 边界 ”的结果。 使用border时，它会增加元素的大小，并且它们不适合容器（可以禁用transform来查看）。 您可以考虑使用“ 大纲 ”而不是“边框”来解决此问题。

另外，要填补空的角落，您需要添加更多的项目（菱形）并增加网格的大小。

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

Answer 2

添加保证金和隐藏的溢出

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