将不同大小的图像很好地融入拼贴画

Question

我正在寻找一个javascript库(或我可以实现的算法),以便在单个页面上放置任意大小的图像,剩下很少的空白.与Google Plus显示图像的方式类似[示例].或者甚至可能更有趣(谷歌使它们相同的高度)

可以稍微调整图像的缩放比例,只要纵横比没有搞砸,并且看起来很适合页面上的"适合".

Answer 1

您可以使用受欢迎的图书馆Masonary.

jQuery的动态布局插件CSS的反面浮动

这是一个代码示例 ......

$('#container').masonry({
  itemSelector: '.box'
});

以下是Github上的消息来源以及Shoptalk播客对David Desandro 的采访.

提示:确保父容器具有position:relative,因此所有内容都绑定到容器.