javascript - CSS/Javascript 中的树形图像布局

Question

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

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

作为第一次尝试，我从这个 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 张图片、第​​二行有 4 张图片、第​​三行有 3 张图片时，这才有效。此外，第三行并没有真正位于第二行的第一张图片下方，如果您的图片不超过 3 张，它看起来就是这样。

所以有多个部分:

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

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

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

Answer 1

您所追求的听起来像是某种经过修改的 TreeMap 可视化算法。你是对的，使用同位素你不能强制执行这种分层布局。也许有一个 look here on github对于您可以适应的 jQuery 方法。可能，these JavaScript图书馆很有用。和 this toolkit here使用 Java 和 Flash。或者可以考虑 this one可以作为交互式 Java 小程序部署在互联网上。