[Resolvido] Script de content liquid

[1sefirot1 0]

Galera, bom dia...

 

Alguem por um acaso conhece algum script tipo o desse site aqui:

 

http://www.accxmedia.com/

 

 

Ele distribui as LI's nesse container com scroll.. de maneira uniforme.. como um mosaico..

 

Se eu tiver q fazer isso do zero eu to f***** .. rsrsrs

 

porfavor.. help!

[William Bruno 1501]

a disposição em mosaico é puro css.

 

não tem muito pra onde fugir.

sabe fazer o css ?

[1sefirot1 0]

Cara.. sei.. mas vamos la..

 

Quando diz puro css, se entende que vamos flutuar todo mundo pra esquerda por exemplo..

 

Mas repare no site.. nao se sobra espaço de maneira alguma... ele pega as proporções e define os tamanhos de tal maneira que:

 

1 - Se a imagem não casar a proporção com outra, ela ficará completando sozinha um bloco

2 - Se casar a proporção com otra, fica uma em cima da outra..

3 - se uma for mais larga e de menor altura.. fica pequenininha e casa com mais duas abaixo..

 

Entende?

 

nao sei se apenas flutuando resolva nao..

O css deixa "lacunas" vazias, se os diferentes tamanhos de box nao casarem entre si... tipo um quebra cabeça mal feita..

[William Bruno 1501]

sim, mas olha com o Firebug, o cara usou position: absolute

 

e posicionou cada box na mão. Viu? =)

 

a forma mais tosca e garantida de fazer.

[1sefirot1 0]

achei.. aqui fala tudo a respeito..

 

Inclusive o comparativo entre flutuar com css e adequar proporções pro encaixe.

 

http://masonry.desandro.com/

 

Veja esse que GENIAL

 

http://masonry.desandro.com/demos/adding-items.html

 

 

Vai adicionando itens e pre-adicionando itens..

 

 

Depois tente redimensionar a janela do navegador..

[JCMais 75]

Se existisse um mundo perfeito, no qual os usuários apenas usassem os navegadores mais recentes, o IE seguisse os padrões do W3C e todos os navegadores já tivessem adotado CSS3, bastaria isto: http://css-tricks.com/13372-seamless-responsive-photo-grid/