0

我希望将图像排列在树层次结构中，每个子节点位于父节点下方，顶部对齐其他子节点。每个节点应该允许任意数量的子节点。理想情况下，是这样的：

盒子网格

请注意，这与Masonry或 Isotope 不同，后者允许较低图像跨越较高图像的边缘。然而，任何数量的图像的自动调整大小当然是可取的。

作为第一次尝试，我从这个 CSS 开始：

img.first-row {
    max-width: 100%;
    vertical-align: top;
}
img.second-row {
    max-width: 24%;
    vertical-align: top;
}
img.third-row {
    max-width: 8%;
    vertical-align: top;
}

仅当您在第一行有 1 张图像，在第 2 行有 4 张图像，在第 3 行有 3 张图像时，这才有效。此外，第三行并没有真正停留在第二行的第一张图片下方，如果您没有超过 3 张图片，它看起来就是这样。

所以有多个部分：

  1. 树形布局的递归嵌套，可以容纳任何内容。

  2. 自动调整图像大小以适应布局。

  3. 在 HTML 文档中完成此操作的方法。我对 Javascript、CSS、jQuery 或其他什么东西并不特别。只要保持树形布局，图像也不必特别紧密地组合在一起。

4

1 回答 1

0

你所追求的听起来像是某种经过修改的树图可视化算法。你是对的，使用同位素你不能强制执行这种分层布局。也许在 github 上查看一下您可以适应的 jQuery 方法。这些 JavaScript库可能很有用。而这里的这个工具包使用了Java和Flash。或者可以考虑这个可以部署在互联网上的交互式 Java 小程序。

于 2012-08-18T21:14:43.940 回答