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¿Alguien sabe cómo funciona el diseño de Pinterest.com?
Respuesta
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.
gracias por su recurso :) – nXqd
** + 1 ** Proporcioné el enlace a esta respuesta para diferentes preguntas/respuestas [* * AQUÍ **] (http://stackoverflow.com/a/11253923/1195891). – arttronics
Estoy babeando en la Masonería. Gracias por el consejo. –
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.
¡Gracias por el puntero a la Masonería! No había escuchado sobre eso antes, investigará – bachposer
, es posible hacerlo a través de css3 ahora ... –
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
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/
el problema con esto es que la página no se leerá de izquierda a derecha, por lo que no habrá tres últimos elementos en la parte superior de la página. – esp
@esp: ¡EXACTAMENTE! +1. Las columnas están diseñadas para contenido verticalmente corto para que sea más legible al reducir la longitud de la línea de texto. Si tenemos un contenido desplazable verticalmente largo y el orden de los elementos individuales (como en las tarjetas Pinterest) es pseudo-importante, el diseño de la columna no es una solución. –
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:
- DIV no son muy diferentes en altura.
- No le importan algunas infracciones menores de los pedidos (algunos elementos que se detallan a continuación pueden consultarse arriba).
- 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
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
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; }
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;
}
- 1. ¿Alguien sabe cómo implementar el protocolo NSFastEnumeration?
- 2. ¿Alguien sabe cómo utilizar PagerTitleStrip en Android
- 3. ¿Alguien sabe el estado actual de Graphics32?
- 4. ¿Alguien sabe de alguna colección de sprites?
- 5. fsi.exe Ensamblaje: ¿Alguien sabe cómo incrustarlo?
- 6. ¿Alguien sabe algo acerca de OLAP Internals?
- 7. Android: ¿Alguien sabe cómo capturar video?
- 8. virtualenv, mysql-python, pip: ¿alguien sabe cómo?
- 9. ¿Alguien sabe cómo google Analytics procesa datos?
- 10. ¿Alguien sabe cómo habilitar ARM FIQ?
- 11. ¿Alguien sabe de una buena referencia para el diseño de DSL?
- 12. ¿Alguien sabe qué significa advapi?
- 13. ¿Cómo sabe cuándo utilizar patrones de diseño?
- 14. ¿Alguien sabe de un generador de paquetes?
- 15. ¿Alguien sabe cómo getWindow() en el servicio en Android?
- 16. ¿Alguien sabe algún buen tutorial de silverlight?
- 17. ¿Alguien sabe de un buen explorador OData?
- 18. ¿Alguien sabe dónde encontrar plantillas gratuitas de diseño de bases de datos?
- 19. ¿Alguien sabe cómo y por qué esta cosa "cada tarjeta SIM tiene un nombre" funciona?
- 20. ¿Alguien sabe qué significa el fragmento de código a continuación?
- 21. ¿Alguien sabe dónde obtener el código real de Cray PVP?
- 22. ¿Alguien sabe algo como RSPec para PHP?
- 23. ¿Alguien sabe algún tutorial stm32 muy básico?
- 24. Alguien sabe qué tumblr está escrito en
- 25. ¿Alguien sabe para qué usa Flash Gmail?
- 26. ¿Alguien sabe qué hace "mov edi, edi"?
- 27. Código fuente del botón "Pin It" (pinterest.com)
- 28. ¿Alguien sabe bien el tutorial Object Constraint Language (OCL)?
- 29. ¿Alguien sabe lo que significa que el mensaje ShellHook HSHELL_RUDEAPPACTIVATED?
- 30. ¿Alguien sabe cómo pegar como comentario en VS2010?
¿Qué te hace pensar que CSS está haciendo eso? Es JavaScript. – thirtydot