html - 新的谷歌图片如何正确 float

Question

有没有人见过新的谷歌图片搜索。它设法使图像漂浮在一个区域中。通过按尺寸对图像进行分组，图像可以正确地适应这一点。

Frog images

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

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

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

Css 规则必须使图像 float 但也重新排列它们。

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

Answer 1

他们使用 canvas js 调整图像大小。然后设置li width, height 然后添加overflow hidden。如果您在 css img.myimg {width:70px} 中为所有图像设置宽度，您也可以获得相同的结果。我认为渲染页面然后使用 js 代码不会花费更长的时间。