1

Eu preciso fazer com o grid system se possível o exemplo da imagem:

inserir a descrição da imagem aqui

No exemplo acima, preciso apenas da formatação, onde cada evento é um 'div' com um tamanho dinâmico, e o de baixo cola no de cima como mostra o exemplo. Tentei utilizar o código abaixo para chegar como no exemplo, mas quando atinge o 'col-12' ele quebra a linha e fica tudo 'reto' na mesma linha, ficando desproporcional, ou seja, se fosse no exemplo abaixo, a cada 4 eventos, ficariam todos em uma linha reta.

Abaixo é o código que tentei utilizar para chegar no exemplo abaixo:

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

Obrigado pela ajuda.

1 Resposta 1

1

Use o plugin Jquery.isotope:

$(document).ready(function()
{	
  $('.grid').isotope({
  	itemSelector: '.rows',
        sortBy : 'original-order'
  });
});
.rows {
  margin: 2px 2px 2px 2px;
  width: 192px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.1/isotope.pkgd.js"></script>


<div class="grid">
  <div class="rows">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/9b/03/28/9b032800c0034f2690223e12ff014809.jpg" border="0" style="width:190px" /> 
  </div>  
  <div class="rows">
    <img src="https://s-media-cache-ak0.pinimg.com/originals/ae/27/88/ae27883794e4a96e9d9a4cb2b2d1313b.jpg" border="0" style="width:190px"/>
  </div>
  <div class="rows">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/9b/03/28/9b032800c0034f2690223e12ff014809.jpg" border="0" style="width:190px" /> 
  </div>   
  <div class="rows">
    <img src="https://s-media-cache-ak0.pinimg.com/originals/ae/27/88/ae27883794e4a96e9d9a4cb2b2d1313b.jpg" border="0" style="width:190px"/>
  </div>  
   <div class="rows">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/9b/03/28/9b032800c0034f2690223e12ff014809.jpg" border="0" style="width:190px" /> 
  </div>  
  <div class="rows">
    <img src="https://s-media-cache-ak0.pinimg.com/originals/ae/27/88/ae27883794e4a96e9d9a4cb2b2d1313b.jpg" border="0" style="width:190px"/>
  </div> 
  <div class="rows">
    <img src="https://s-media-cache-ak0.pinimg.com/originals/ae/27/88/ae27883794e4a96e9d9a4cb2b2d1313b.jpg" border="0" style="width:190px"/>
  </div>
  <div class="rows">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/9b/03/28/9b032800c0034f2690223e12ff014809.jpg" border="0" style="width:190px" /> 
  </div>
</div>

As classes do deverão ser removidas, o Jquery.isotope fará esse papel inclusive quando diminuir ou aumentar a página.

2
  • 1
    Show, exatamente isso que estava procurando. Obrigado!
    – lfabra
    Commented 27/12/2016 às 0:56
  • @lfabra se for util aceite a resposta.
    – novic
    Commented 27/12/2016 às 2:47

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .