新的谷歌图像如何正确浮动

Question

有没有人看过新的谷歌图片搜索。它设法使图像浮动在一个区域。通过将它们按大小分组，图像可以正确地适应这种情况。

Frog images

我想有两种方法可以做到这一点：

• 通过某种涉及这些图像的宽度和高度的规则编写脚本
• 用于创建图像的Css规则。

在脚本编写场景中，我们可以使用最大宽度1000px，然后将图像分组，为我们的4行图像填充4次。

Css规则必须使图像浮动，但也要重新排序。

有没有人对如何运作有任何其他想法？

Answer 1

我认为google在服务器上执行所有这些工作：尝试调整窗口大小 - 它将在调整大小的图像中重新加载。另一方面，我发现了一个canvas元素，也可用于使用js

调整加载图像的大小

Answer 2

他们用canvas js重新调整图像大小。然后设置li宽度，高度然后添加溢出隐藏。 如果在css img.myimg {width：70px}中为所有图像设置宽度，也可以得到相同的结果。我不认为使用js代码渲染页面需要更长的时间。