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

所以有多个部分：

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

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

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

Answer 1

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