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

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/ ) 来实现填补额外的空白。我在容器的 Angular 上添加了一些 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

希望有帮助。

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