使用不同尺寸的圆形元素的砌体布局

Question

我有一个设计布局，它使用不同的圆形大小的元素，这些元素组合在一起以填充之间的空间。它与 Apple Watch 主应用程序布局完全相同，但除此之外，圆圈的大小也不同。

设计团队的灵感来自于该网站的团队部分：https://www.fcinq.com/。我花了几个小时试图找到一个可以做到这一点的库，或者一些开源代码。看来这是定制的。

我无法使用 D3 或任何以 SVG 格式创建元素的库，因为我需要在某些元素上使用 JS 实现自定义单击事件。基本上，如果可能的话，我想避免使用巨大的图书馆。

有谁知道有哪个库可以开箱即用地执行此操作？或者是否有什么我可以使用的东西可以帮助我或指导我完成这件事？我的时间有限，非常感谢您的帮助。

只要它能实现与https://masonry.desandro.com/相同的效果，任何东西都会有帮助，但使用 Circle 元素来填充间隙（圆圈相互吸引，这样不同大小的圆圈之间就不会留下巨大的白色间隙）其他）。

预先非常感谢

Answer 1

以下是我为可能有相同问题的人实施的方法：

在 Jignesh 的帮助下，我设法对自己的问题提出正确的问题，我发现了这个：https ://stackoverflow.com/a/31098961/11498451

它使用 Packery 库（https://packery.metafizzy.co/）来实现填补额外的空白。我在容器的角上添加了一些 Stamp 元素（https://packery.metafizzy.co/methods.html#stamp ），以实现圆形/居中的感觉，因为库默认不提供它。

编辑：这是一个工作示例：https ://codepen.io/owenfar/pen/xxbybyX

<div id="container">
  <div class="stamp corner-tl"></div>
  <div class="stamp corner-tr"></div>

  <div class="item circle" style="width: 26px; height: 26px;"></div>
  <div class="item circle" style="width: 142px; height: 142px;"></div>
  <div class="item circle" style="width: 120px; height: 120px;"></div>
  <div class="item circle" style="width: 67px; height: 67px;"></div>
  <div class="item circle" style="width: 47px; height: 47px;"></div>
  <div class="item circle" style="width: 32px; height: 32px;"></div>
  <div class="item circle" style="width: 152px; height: 152px;"></div>
  <div class="item circle" style="width: 105px; height: 105px;"></div>
  <div class="item circle" style="width: 32px; height: 32px;"></div>
  <div class="item circle" style="width: 138px; height: 138px;"></div>
  <div class="item circle" style="width: 132px; height: 132px;"></div>
  <div class="item circle" style="width: 165px; height: 165px;"></div>
  <div class="item circle" style="width: 83px; height: 83px;"></div>
  <div class="item circle" style="width: 136px; height: 136px;"></div>
  <div class="item circle" style="width: 160px; height: 160px;"></div>
  <div class="item circle" style="width: 139px; height: 139px;"></div>
  <div class="item circle" style="width: 60px; height: 60px;"></div>
  <div class="item circle" style="width: 97px; height: 97px;"></div>
  <div class="item circle" style="width: 70px; height: 70px;"></div>
  <div class="item circle" style="width: 34px; height: 34px;"></div>
  <div class="item circle" style="width: 64px; height: 64px;"></div>
  <div class="item circle" style="width: 136px; height: 136px;"></div>
  <div class="item circle" style="width: 27px; height: 27px;"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/packery/1.4.1/packery.pkgd.min.js"></script>

<style>
.circle {
    border-radius: 50%;
    text-align: center;
    background: teal;
    display: inline-block;
}

.stamp {
  position: absolute;
  width: 150px;
  height: 150px;

  &.corner-tl {
    top: 0;
    left: 0;
  }

  &.corner-tr {
    top: 0;
    right: 0;
  }
}
</style>

<script>
var container = document.querySelector('#container');
var pckry = new Packery ( container, {
    // Options
    itemSelector: '.item',
    gutter: 5,
    stamp: '.stamp',
});
</script

希望有帮助。

感谢那些研究我的问题的人。