非大小的钻石设计在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中创建一个图片库

回答

相关问题