¿Alguien sabe cómo funciona el diseño de Pinterest.com?

Question

En http://pinterest.com/ hay 'pines', es decir <div> s de altura variable, pero todos parecen funcionar muy bien, sin "huecos" o saltos de línea para interrumpir el flujo. ¿Hay una explicación buena/simple de cómo consiguen que el CSS se comporte e implemente eso (estoy esperando aprender y comprender en lugar de solo culpar a la carga de su archivo CSS). Gracias de antemano

Answer 1

Salida jQuery albañilería, será la forma más sencilla de lograr el diseño que desee. http://masonry.desandro.com/

he hecho un poco de lectura de JavaScript de Pinterest hace unos meses para resolver esto a mí mismo. En resumen, no lo hacen con CSS en absoluto. Colocan todas sus cajas/alfileres dinámicamente iterando a través de todas ellas, calculando la altura y colocándola en la parte inferior de la columna que tenga la altura más corta en ese momento (agregando la altura de esa caja). Básicamente, no hay truco para eso, es solo Javascript.

Answer 2

Css en realidad no puede hacer eso en la forma en que lo desee. Javascript, like this example, can.

Debido a la forma en filas de flotado o se comportan de contenido en línea-bloqueado, css no es adecuada para el trabajo. Tendría que generar dinámicamente columnas verticales de contenido y colocarlas una al lado de la otra, lo que significa que tendría que luchar para obtener el contenido actual en la parte superior. Sería un poco doloroso, de verdad. También perderás la capacidad de respuesta al ancho de la ventana.

Answer 3

Usted puede leer la respuesta del cofundador de Pinterest a una pregunta anterior acerca de esto: how to replicate pinterest.com's absolute div stacking layout

Answer 4

Ahora puede realmente hacerlo con CSS3

.three-col { 
    -moz-column-count: 3; 
    -moz-column-gap: 20px; 
    -webkit-column-count: 3; 
    -webkit-column-gap: 20px; 
} 

guía completa en: http://kmsm.ca/2010/an-almost-complete-guide-to-css3-multi-column-layouts/

Answer 5

han consultado en todas las opciones, terminé implementando el diseño similar a Pinterest de esta manera:

Todos los DIVs son:

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

Esto los convierte en filas posición mejor que cuando se hacen flotar.

Luego, cuando se carga la página, que iterar todos los DIVs en JavaScript para eliminar huecos entre ellos. Funciona aceptablemente bien cuando:

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

La ventaja de este enfoque - su HTMLs tiene sentido para los motores de búsqueda, puede trabajar con Javascript deshabilitado/bloqueado por el firewall, la secuencia de elementos en HTML coincide con la secuencia lógica (los más nuevos elementos antes de más edad). Se puede ver que está funcionando en http://SheepOrPig.com/news

Answer 6

manera más fácil y simple que hice, esto se ve inducido. Pero pensé en compartir .....

Se trata de tres diseño de columna ...

primer recipiente 3 no va a agregar altura a ella .. cuarto recipiente se llevará a la altura y la posición de la parte superior del recipiente 1 (es decir prev().prev().prev())

counter = counter+1; 
if(counter > 3){ 
var getTop = $(this).prev().prev().prev().offset(); 
var getLeft = $(this).prev().prev().prev().offset(); 
var getHeight = $(this).prev().prev().prev().height(); 
var countTPH = getTop.top + getHeight - 20; 
$(this).css({"position":"absolute","top":countTPH+"px","left":getLeft.left+"px"}); 
      } 

he puesto prev() sólo para hacer lector a entender el código simple 1

Answer 7

Es simple cómo funciona: Aquí, escribí el mío en cuestión de minutos. http://jsfiddle.net/92gxyugb/1/

coffeescript

tiles = $('.tiles .t') 
container = $('.tiles').width() 
width  = $('.tiles .t:first').width() 
columns_height = {} 
columns = Math.floor container/width 
space  = container % width 
space  = space/(columns-1) 

for tile,i in tiles 
    column_index = i % columns 
    columns_height[column_index] ?= 0 
    sp = switch column_index 
    when 0 then 0 
    when columns then 0 
    else 
     space * column_index 
    $(tile).css 
    top: columns_height[column_index] 
    left: (column_index * width)+sp 
    columns_height[column_index] += $(tile).height()+space 

max_height = 0 
for k,v of columns_height 
    if v > max_height 
    max_height = v 
$('.tiles').height max_height-space 

html

<div class='tiles'> 
    <div class='t t1'></div> 
    <div class='t t2'></div> 
    <div class='t t3'></div> 
    <div class='t t4'></div> 
    <div class='t t5'></div> 
    <div class='t t6'></div> 
    <div class='t t7'></div> 
    <div class='t t8'></div> 
    <div class='t t9'></div> 
    <div class='t t10'></div> 
    <div class='t t11'></div> 
    <div class='t t12'></div> 
    <div class='t t13'></div> 
    <div class='t t14'></div> 
    <div class='t t15'></div> 
    <div class='t t16'></div> 
</div> 

css

.tiles {position: relative; width: 500px; background: rgb(140,250,250); } 
.t { position: absolute; width: 87px; background: rgb(100,100,100); } 
.t1 { height: 100px; } 
.t2 { height: 140px; } 
.t3 { height: 200px; } 
.t4 { height: 180px; } 
.t5 { height: 120px; } 
.t6 { height: 150px; } 
.t7 { height: 180px; } 
.t8 { height: 200px; } 
.t9 { height: 120px; } 
.t10 { height: 160px; } 
.t11 { height: 210px; } 
.t12 { height: 160px; } 
.t13 { height: 150px; } 
.t14 { height: 150px; } 
.t15 { height: 130px; } 
.t16 { height: 170px; } 

Answer 8

Andrews respuesta es increíble! Estaba buscando una solución y finalmente la obtuve ... Como Andrew escribió por posicionamiento ... Aquí está mi fragmento de JS. No es perfecto, pero es la dirección correcta. Gracias Andrew!

var tilename = 6; 

for (var i = 0; i < document.querySelectorAll('#tiles .t').length; i++) { 
    document.getElementsByClassName("t"+tilename)[0].style.top = document.getElementsByClassName("t"+(tilename-5))[0].offsetHeight + 10; 
    tilename += 1; 
}