非尺寸鑽石設計可在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>