cómo replicar el diseño de astackmiento div absoluto de pinterest.com

Estoy buscando replicar el diseño div de Pinterest.com, específicamente cómo el número de columnas se ajusta para ajustarse más o menos al tamaño del navegador y el astackmiento vertical no depende de las alturas de columna adyacentes. El código fuente muestra que cada div es la posición absoluta. Un cofundador ha respondido una publicación de Quora indicando que se hace con jQuery personalizado y CSS. Me gustaría que los resultados se clasifiquen de izquierda a derecha. Cualquier dirección que pueda proporcionar para hacerlo yo mismo sería muy apreciada.

También puede verificar en jQuery Plug-in Masonry , para este tipo de funcionalidad.

Escribí el guión de Pinterest. Los ID no están relacionados con el diseño, y se usan para otros JS relacionados con la interacción. Aquí está la base de cómo funciona:

Antemano:

  • Posiciona absolutamente los contenedores pin
  • Determine el ancho de la columna
  • Determinar el margen entre columnas (el canal)

Configurar una matriz:

  • Obtenga el ancho del contenedor principal; calcule el número de columnas que se ajustarán
  • Cree una matriz vacía, con una longitud igual al # de columnas. Utilice esta matriz para almacenar la altura de cada columna a medida que crea el diseño, por ejemplo, la altura de la columna 1 se almacena como matriz [0]

Pasa por cada pin:

  • Ponga cada pin en la columna más corta en el momento en que se agrega
  • “left:” === the column # (index array) multiplicado por el ancho de la columna + margen
  • “arriba:” === El valor en la matriz (altura) para la columna más corta en ese momento
  • Finalmente, agregue la altura del pin a la altura de la columna (valor de matriz)

El resultado es liviano. En Chrome, diseñar una página completa de más de 50 pines demora <10ms.

Lanzamos un plugin jQuery porque recibimos la misma pregunta varias veces para Wookmark . Crea exactamente este tipo de diseño. Véalo aquí – Wookmark jQuery plugin

Después de haber analizado todas las opciones, terminé implementando el diseño similar a Pinterest de esta manera:

Todos los DIV son:

div.tile { display: inline-block; vertical-align: top; } 

Esto los hace posicionarse en filas mejor que cuando están flotando.

Luego, cuando se carga la página, repito todos los DIV en JavaScript para eliminar las brechas entre ellos. Funciona aceptablemente bien cuando:

  1. Los DIV no son muy diferentes en altura.
  2. No te molesta que se produzcan infracciones menores de los pedidos (algunos elementos que se detallan a continuación pueden aparecer arriba).
  3. No te importa que el resultado final sea de diferente altura.

El beneficio de este enfoque: su HTML tiene sentido para los motores de búsqueda, puede funcionar con JavaScript deshabilitado / bloqueado por firewall, la secuencia de elementos en HTML coincide con la secuencia lógica (los elementos más nuevos antes que el anterior)

Dividen entidades por columnas con identificadores (mala solución … mejor uso de nombres de clase) y luego calculan posiciones por grupos de columnas

¿Por qué no pruebas esto, cosas simples de js?

http://vanilla-masonry.desandro.com/index.html

O incluso esto con jQuery y carga de desplazamiento también.

http://masonry.desandro.com/index.html

Podrías usar flotadores y medir el ancho de tus div usando porcentajes junto con el ancho mínimo para forzar a los divs a caer automáticamente una vez que se alcanza el ancho mínimo. Es la forma en que lo conseguimos trabajando en http://www.goldtree.co.za/work