非大小的鑽石設計在html和css中創建一個圖片庫

我想創建一個鑽石圖案作爲圖片庫使用。非大小的鑽石設計在html和css中創建一個圖片庫

我的設計意圖是像波紋管圖片：

正如你看到的，設計是由具有三種不同尺寸的許多鑽石（960x75像素，爲150px或225px）在容器（例如Div元素）與特定大小。

我嘗試了很多方法來創建，但我無法完全做出這個設計。

我測試的方法之一是使用Masonry jquery plugin來創建一個簡單的網格，然後旋轉父容器度。

$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/[email protected]/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>

但是它有很多問題，所以，有鑽石之間的差距大，可在主容器的角落空格，甚至可能有些鑽石在放置了容器的完全。

什麼是解決方案？我如何創建一個像上面那樣沒有問題的設計？

來源

2016-07-26 A.B.Developer

添加溢出：隱藏在#gallery這 - 一些鑽石在安置了在容器完全。 –

@LaljiTadhani，當然我不想把鑽石放在容器外面。你的解決方案只隱藏它們。他們之間的差距呢？ –

其實鑽石之間的間隙的「邊境」的結果。當你使用邊框時，它增加了元素的大小，並且它們不適合容器（你可以禁用變換來看到它）。您可以考慮使用「概要」而不是「邊界」來解決此問題。

同樣爲了填補空的角落，你需要添加更多的項目（菱形）並增加網格的大小。

$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/[email protected]/dist/masonry.pkgd.js"></script> 
 

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

來源

2016-07-26 13:56:52

添加保證金&溢出隱藏

$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/[email protected]/dist/masonry.pkgd.js"></script> 
 

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

來源

2016-07-26 13:12:10

如果你看到你的解決方案的結果可以看到，這不是我想要的。 –

我的回答編輯現在檢查 –

非大小的鑽石設計在html和css中創建一個圖片庫

回答

相關問題