Vejamos então como montar um layout Masonry apenas com CSS3.
Vou passar para vocês uma solução que na verdade comecei usando para criar colunas em textos.
Com o COLUMN-COUNT é possível essa façanha. Neste link você também encontra um pouco mais sobre ele.
Sem enrolação né Ricardo…
Com vocês um “Layout Masonry apenas com CSS3”
Então vamos lá.
Um código HTML para vocês. Coloquei os comentários para entenderem o que fiz.
<div class="largura"><!-- Div que adiciona a largura da página -->
<section class="masonry"><!-- Indico que aqui terá o layout desejado -->
<article class="item"><!-- Aqui ficam nossos artigos (posts) -->
<header><!-- Cabeçalho do artigo -->
<img src=""><!-- Imagem destacada -->
<h1></h1><!-- Título do artigo -->
</header>
<content></content><!-- Conteúdo do artigo -->
<footer></footer><!-- Rodapé do artigo -->
</article>
</section>
</div>
Agora o CSS que faz o que quermos.
.masonry { /* Nosso conteúdo em colunas (section) */
column-count: 4; /* Indicamos quantas colunas queremos */
column-gap: 1em; /* Espaço entre as colunas */
}
.item { /* Nossos Artigos (article) */
display: inline-block; /* O segredo para ficar bem formatada as divisões */
width: 100%; /* Ocupar a largura inteira da coluna */
}
Isso é tudo de que precisamos.
Todo o restante é perfumaria.
Ei, e o IE? Como fica?
Pois é, tem ele…
Resolvendo o problema.
Como “CSS columns” são suportados apenas por navegadores modernos, devemos usar uma solução alternativa com JavaScript, assim ele funcionará em navegadores antigos. Nós podemos adicionar um retorno ao nosso alvenaria, fazendo uso de jQuery Masonry plugin.
Podemos chamar o jQuery Mansonry para se entender com o IE, veja:
<!--[if lte IE 9]><script src="masonry.pkgd.min.js"></script><![endif]-->
Para ver esta solução em ação clique no link abaixo.
Deixei um exemplo de como seria.
Vocês podem copiar e usar como base para aplicações mais elaboradas.
ACESSAR EXEMPLO AQUI
Espero que tenham gostado do conteúdo.
Faço isso com muita dedicação.
Estou tentando deixar as coisas o mais simples possível. Para que tanto os iniciantes quanto os que já tem mais tempo de estrada possam aproveitar.
Um forte a braço e sucesso.