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

Pau*_*aul 5 html css scripting image

有没有人见过新的谷歌图片搜索.它设法使图像浮动在一个区域.通过将它们按大小分组,图像正确地适合于此.

青蛙图像

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

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

在脚本方案中,我们可以使用最大宽度1000px,然后将图像分组,为我们的4行图像填充这4次.

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

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

小智 1

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