如何使用javascript编写复杂的图像网格

Question

对于投资组合网站，我将不得不开发一个可视化的图像网格。

我现在正在为这个网格做测试。

我有两种选择：

1.带有垂直对齐的简单网格，就像此线框上的那个：http://daviddarx.com/stuffs/work/barbu/wireframe/search/simple.png

有几个插件可以做到这一点，如果有必要，我可以轻松开发自定义解决方案。但是这个网格有点过于简单和常见。我希望得到一个像这样的更复杂的网格：

2.复杂网格，没有任何垂直或水平对齐方式，如此线框上的那个： http://daviddarx.com/stuffs/work/barbu/wireframe/search/complexe.png

但是对于这个，我真的不知道如何从概念上开始发展它 所以这是我的问题：

- 我很想开发一个自定义网格，以获得我想要的。你有任何关于如何开发这种网格的建议，策略和教程吗？哪些步骤，如何启动它等等......

- 如果不然，你知道任何可以实现这个目标的插件或库吗？

提前感谢您的帮助！ 大卫

Answer 1

这个jQuery插件可能会做你想要的：http://isotope.metafizzy.co/

如果不这样做，请解释原因，我会试着看看我是否能想到不同的解决方案。

Answer 2

您可以使用jQuery插件砌体。如果你想自己做，你可以使用树图算法，但也有一个jQuery插件树图。