Dê uma olhada nesse plugin http://isotope.metafizzy.co/, talvez resolva seu problema.
Ele tem diversas opções de layout, mas talvez a que voc6e tenha interesse seja a Masonry
. Nela os blocos de tamanho diferente são encaixados, como se fosse um muro de tijolos (daí o nome). A documentação descreve assim:
Masonry é o layout padrão no Isotope. Os elementos são organizados de forma inteligente, dentro de um grid vertical. Para cada elemento, o script calcula a melhor posição dentro do grid.
O algoritmo que determina a posição dos elementos é esse aqui:
_masonryLayout : function( $elems ) {
var instance = this,
props = instance.masonry;
$elems.each(function(){
var $this = $(this),
//how many columns does this brick span
colSpan = Math.ceil( $this.outerWidth(true) / props.columnWidth );
colSpan = Math.min( colSpan, props.cols );
if ( colSpan === 1 ) {
// if brick spans only one column, just like singleMode
instance._masonryPlaceBrick( $this, props.colYs );
} else {
// brick spans more than one column
// how many different places could this brick fit horizontally
var groupCount = props.cols + 1 - colSpan,
groupY = [],
groupColY,
i;
// for each group potential horizontal position
for ( i=0; i < groupCount; i++ ) {
// make an array of colY values for that one group
groupColY = props.colYs.slice( i, i+colSpan );
// and get the max value of the array
groupY[i] = Math.max.apply( Math, groupColY );
}
instance._masonryPlaceBrick( $this, groupY );
}
});
}
Pelo que eu pude entender o que acontence é:
- O grid é iniciado com uma lista das posições iniciais de cada coluna. Ex:
[0, 0, 0, 0]
- Pra cada elemento, o algoritmo determina em quais colunas ele caberia, baseado na largura. Então, se são 5 colunas, um elemento com a largura de 3 colunas, ele pode entrar nas colunas 1 ou 2.
- Em cada uma das colunas possíveis de encaixar o elemento, é verificado qual o lugar mais alto em que é possível inserí-lo.
- O elemento é inserido nos espaços mais altos possíveis, e a primeira posição disponível das colunas que ele ocupa é atualizada.
É um processo esquisito de se explicar, mas bem simples de visualizaar, se você ver os exemplos no site do Isotope. Ou, melhor ainda, se montar um pra você e futucar nele.