CSS/Javascript中的树图像布局

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

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

作为第一次尝试，我从以下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张图片，它看起来就是这样

因此有多个部分：

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

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

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

---

你所追求的听起来像是某种改进的树形图可视化算法。你是对的，使用同位素你不能执行这样的层次结构。也许有一个适合jQuery方法的方法。也许，图书馆是有用的。并使用Java和Flash。或者考虑一下可以在互联网上部署为交互式java applet。