2010-08-06 20 views
5

Alguien ha visto la nueva búsqueda de imágenes de Google. Se las arregla para hacer que las imágenes floten en un área. las imágenes encajan en esto correctamente al agruparlas en los tamaños.nuevas imágenes de google cómo flotan correctamente

Frog images

supongo que hay dos maneras de hacer esto:

  • Scripting por algún tipo de regla que implica las anchuras y alturas de estas imágenes
  • una regla CSS para crear las imágenes.

En un escenario de scripting podríamos usar un ancho máximo de 1000px y luego agrupar imágenes para llenar esto 4 veces para nuestras 4 líneas de imágenes.

La regla de Css debería hacer que las imágenes floten pero también las reordene.

¿Alguien tiene alguna otra idea sobre cómo funcionaría esto?

+0

Una pista posible: después de que todos se cargaron, se reorganizaron para ajustarse mejor en mi navegador. – Justin

+1

En Firefox, usa '' es. Sin JavaScript, se degrada a imágenes simples. – MvanGeest

+0

Guau, realmente no me había dado cuenta de que siempre se alinean perfectamente. Bastante elegante Google. Parece que el trabajo real se está haciendo desde el lado del servidor. También tenga en cuenta que no tienen miedo de recortar un poco las imágenes para que se alineen. – Triptych

Respuesta

1

Se vuelven a clasificar según el tamaño las imágenes con canvas js. Luego configure el ancho y alto de Li y luego agregue el desbordamiento oculto. También puede obtener el mismo resultado si establece el ancho en todas sus imágenes en css img.myimg {ancho: 70px}. No creo que tarde más en renderizar la página usando el código js.

1

Creo que google está haciendo todas estas personalizaciones en el servidor: intente redimensionar la ventana, se volverá a cargar en un segundo con imágenes redimensionadas. Por otro lado, encontré un elemento de lienzo que también se puede usar para cambiar el tamaño de las imágenes cargadas con js

+0

También mantienen su orden, esto indicaría que las imágenes están escaladas para que quepan en una cuadrícula de 10, 8, 6, 4, 3 de ancho. ¡Complicado! – Paul

Cuestiones relacionadas