javascript - 是否有一个 js 库可以以最佳间距以行显示图像搜索结果？

Question

像谷歌图像搜索这样的网站会按行显示不同宽度的图像。显然，他们选择将哪些图像组合在一起，以及将哪些图像缩小一点，以便在图像之间实现相当均匀的间距。

我尝试在线搜索实现此类算法的库。

我在这里询问是否有人知道这样的解决方案，如果不知道，我可以使用一些关于如何自己编写此代码的指示。

更新:我发现photowall使用jquery。这似乎就是答案。我目前正在寻找 angular.js 指令

Answer 1

有图书馆Masonry (mplugjan 也提到过)。这个库在设置网格方面非常灵活。 See their options page .

如果您想自己做，大约有两种选择:

1. 图像具有固定/最大宽度
2. 图像具有固定/最大高度

Google 图片为其图像提供了最大高度，这允许他们创建行并将图像放置在其中。

另一个选项是创建固定列并将图像放置在这些列中。然而，此选项实现起来有点困难，因为您必须更加仔细地考虑图像的放置顺序。

编辑:快速浏览一下 Photowall 后，似乎 Masonry 更加灵活。 Masonry 网站上的文档显示了更多混合不同高度/宽度的示例。