有没有办法在钻石形状中创建masonary js风格？

Question

我正在尝试使用html，Css和Jquery创建菱形画廊设计。 为了创建菱形设计，我使用了Diamond Js插件。但是当我使用这个插件时，所有的钻石形状都是相同的大小。我需要的是masonary插件（https://masonry.desandro.com/layout.html）和diamond-js（http://mqchen.github.io/jquery.diamonds.js/）插件的组合，用于根据下面链接中附带的设计创建具有可变宽度和高度的图库。

masonary design image

有没有办法创建这样的结构？

Answer 1

以下是您正在寻找的演示： -

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