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!
