,

jQuery Masonry cria grids perfeitas na vertical e horizontal

jQuery Masonry

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!

/por