Nenhum produto encontrado nessa seleção.
Masonry é uma biblioteca JavaScript / jQuery para criar grids que se encaixam perfeitamente na vertical e horizontal. Os Itens serão alinhados como cards, em um layout parecido com o que você pode ver no Google Keep.
Este plugin deverá resolver o problema do alinhamento de itens na vertical quando utilizamos float: left; ou display: inline-block;, o que poderá gerar um espaço indesejado ou até mesmo mostrar itens de maneira totalmente desalinhada.
Claro, se seu layout irá foca apenas em navegadores mais novos que suportam CSS3 e as propriedades column-*, você não vai precisar de nenhuma biblioteca para atingir seu objetivo, porém, este é assunto para um próximo tutorial.
Por agora, veja um exemplo básico de como utilizar o jQuery Masonry para atingir o mesmo efeito da demonstração abaixo:
Veja abaixo os códigos HTML, CSS e jQuery utilizados:
O HTML (index.html)
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>jQuery Masonry</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <h1>jQuery Masonry</h1> <p><a href="http://masonry.desandro.com/">masonry.desandro.com</a></p> <div class="grid"> <div class="grid-item height-one"></div> <div class="grid-item height-seven"></div> <div class="grid-item height-two"></div> <div class="grid-item height-four"></div> <div class="grid-item height-three"></div> <div class="grid-item height-five"></div> <div class="grid-item height-six"></div> <div class="grid-item height-one"></div> <div class="grid-item height-seven"></div> <div class="grid-item height-two"></div> <div class="grid-item height-four"></div> <div class="grid-item height-three"></div> <div class="grid-item height-five"></div> <div class="grid-item height-six"></div> <div class="grid-item height-one"></div> <div class="grid-item height-seven"></div> <div class="grid-item height-two"></div> <div class="grid-item height-four"></div> <div class="grid-item height-three"></div> <div class="grid-item height-five"></div> <div class="grid-item height-six"></div> <div class="grid-item height-one"></div> <div class="grid-item height-seven"></div> <div class="grid-item height-two"></div> <div class="grid-item height-four"></div> <div class="grid-item height-three"></div> <div class="grid-item height-five"></div> <div class="grid-item height-six"></div> <div class="grid-item height-one"></div> <div class="grid-item height-seven"></div> <div class="grid-item height-two"></div> <div class="grid-item height-four"></div> <div class="grid-item height-three"></div> <div class="grid-item height-five"></div> <div class="grid-item height-six"></div> </div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js'></script> <script src="js/index.js"></script> </body> </html>
O CSS (css/style.css)
.container { max-width: 960px; margin: 0 auto; } .grid { margin: 0 auto; } .grid-item { width: 305px; margin-bottom: 15px; } .height-one { height: 50px; background: #e74c3c; } .height-two { height: 100px; background: #f1c40f; } .height-three { height: 150px; background: #e67e22; } .height-four { height: 200px; background: #2c3e50; } .height-five { height: 250px; background: #27ae60; } .height-six { height: 300px; background: #9b59b6; } .height-seven { height: 350px; background: #2980b9; } h1, p { text-align: center; }
Observação: Você pode omitir a altura, estou adicionando classes para altura porque os elementos não tem conteúdo no exemplo.
O JavaScript (js/index.js)
$(function(){ $('.grid').masonry({ isFitWidth: true, itemSelector: '.grid-item', gutter: 15 }); });
Saiba mais sobre Masonry
O exemplo acima é bem básico, mais da para você ter uma noção sobre como criar sua grid perfeita para a maioria dos navegadores novos e antigos, mas existem milhares de opções que você pode utilizar com o Masonry na página abaixo:
Até o próximo!