¿Cómo configuro mis divisiones de contenido de manera similar a la línea de tiempo de Facebook?

Me gusta el diseño que tiene la línea de tiempo de Facebook con las publicaciones escalonadas de dos columnas. He intentado crear el mismo diseño con solo div s y flotadores estándar. Las carrozas funcionan bien cuando flotan hacia un lado, pero no hacia el otro. Teniendo en cuenta que hay bloques de alturas múltiples, ¿cómo sugieres que sea mejor abordar este diseño? Sería usado para un blog, y soy consciente de que alguien ha creado una plantilla de WordPress sobre esto, pero ¿es posible destilar el diseño en su forma más simple? Después de usar la ventana del Desarrollador de Chrome en mi Timeline y la plantilla de WordPress, estoy luchando por encontrar el código CSS apropiado y necesito ayuda.¿Cómo configuro mis divisiones de contenido de manera similar a la línea de tiempo de Facebook?

Pondré lo que tengo como jsFiddle. He añadido bloques adicionales si los necesitas para estar seguro.

Fuente

2011-11-19 Nathan Bunn

Es por esta razón que desaconsejo el uso de tablas ... se está trabajando tanto en esto cuando podría resolverse usando una tabla. – Purag

Sin embargo, con una tabla, necesito un control específico sobre cada altura de bloque. Si supiera la altura de cada bloque de antemano, estaría tan sonoro como una libra. Como no lo hago, como será para un blog, usar una tabla podría ocasionar más problemas, incluso con rowspan. Necesito que sea fluido, que fluya. El ejemplo que publiqué funciona hasta el bloque 5 y no permite que nada flote detrás de él. –

[Aquí] (http://www.portablehtml.com/2012/09/how-to-build-facebook-timeline-with.html) es otra implementación de línea de tiempo que utiliza jquery, dust.js y webf –

tiene que tener los contenedores de la izquierda flotar y despejaron a la izquierda y los de la derecha flotarán y limpiarán a la derecha. Puede hacer esto ya sea con javascript o cualquiera que sea el idioma del lado del servidor que use. algo rápido en jquery sería así.

(un violín completado .. http://jsfiddle.net/gK2Vn/ Iba para el esqueleto de la cuestión ..)

.item { 
    float: left; 
    clear: left; 
} 
.item.right { 
    float: right; 
    clear: right; 
} 

var left_column_height = 0; 
var right_column_height = 0; 
var items = $('.item'); 
for (var i = 0; i < items.length; i++) { 
    items.eq(i).height(Math.floor(Math.random() * 100) + 10); 
    if (left_column_height > right_column_height) { 
     right_column_height+= items.eq(i).addClass('right').outerHeight(true); 
    } else { 
     left_column_height+= items.eq(i).outerHeight(true); 

    } 
}

Fuente

2011-11-19 02:09:48 Mark