1

Estou com um problema, não estou conseguindo deixar os blocos de diferentes alturas (height) mais ou menos igual ao pinterest, no meu caso são duas colunas respeitando a seguinte regra de responsivo col-xs-12 col-sm-12 col-md-6, ou seja, duas colunas para desktop, e uma coluna para mobile e tablet.

Fiz um exemplo mais ou menos no https://jsfiddle.net/bwnmaq1s/ a ideia é todos os box respeitem a margin-bottom definida.

Aqui vai a imagem do meu problema

inserir a descrição da imagem aqui

Obs.: Os box são incluídos dinamicamente, nunca sei o que vai vim depois e qual a altura dele, isso vai depender das ações dos usuários.

4 Respostas 4

0

Erick o que consegui a respeito de sua dúvida é o chamado Layout Grid Masonry que é a quase a mesma coisa do Waterfall da resposta do RBoschini, ele está bem aplicado aqui.

Inicialmente, ele é feito com Jquery, mas há uma maneira de ser feito com o CSS apenas.

A partir do seu exemplo fiz o seguinte, como você está usando a classe col-md-6 do Bootstrap e esta equivale a um breakpoint de no mínimo 970px, então criei um Media querie com essas definições:

@media (min-width: 970px) {
  .container {
    -moz-column-count: 2;
    -moz-column-gap: 10px;
    -moz-column-width: 50%;
    -webkit-column-count: 2;
    -webkit-column-gap: 10px;
    -webkit-column-width: 50%;
    column-count: 2;
    column-gap: 10px;
    column-width: 50%;
  }
}

O que está dentro do .container é o que fará a mágica, o column do css. O problema é que aparentemente há um conflito deste com o Bootstrap, e o fato dele realizar um corte nas divs. O modo de resolver é aplicando um overflow: auto, um height: 100% no .container e ainda dentro do querie aplicar ao article um break-inside: avoid-column e um -webkit-column-break-inside: avoid. Ficaria assim:

@media (min-width: 970px) {
  .container {
    margin: 2em 0;
    overflow: auto;
    height: 100%;
    -moz-column-count: 2;
    -moz-column-gap: 10px;
    -moz-column-width: 50%;
      -moz-column-fill: auto;
    -webkit-column-count: 2;
    -webkit-column-gap: 10px;
    -webkit-column-width: 50%;
    -webkit-column-fill: auto;
    column-count: 2;
    column-gap: 10px;
    column-width: 50%;
      column-fill: auto;
  }
  article{
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;
  }
}

JsFiddle

JsFiddle FullScreen

Mas isso é tudo muito relativo então teste aí no seu modelo e me avise qualquer coisa...

1
  • Legal Sami muito boa resposta, usei esse Masonry e ta quase do jeito que eu quero, so tem uma coisa me intrigando aqui vou tentar resolve-la. Mais uma vez muito obrigado.
    – user27585
    29/12/2015 às 14:21
0

Você pode usar column-width e column-gap da forma que usei nesse exemplo Exemplo pinterest

Ou usar uma lib que faça isso para você, um exemplo é a lib waterfall https://github.com/kudago/waterfall

Vejá qual caminho quer seguir, qualquer duvida, é só perguntar.

3
  • 1
    Tentei usar esse waterfall mas ele altera o width do meu box deixando pequeno e desconfigura meu layout, vou tentar fazer igual no seu exemplo.
    – user27585
    29/12/2015 às 12:35
  • Poutz tentei fazer seu exemplo aqui, deu mais ou menos certo ainda tem um erro ... olhe a imagem ap.imagensbrasil.org/image/pUQCS ... o box om texto deveria ficar inteiro do lado direito e os box com imagem um em cima do outro.
    – user27585
    29/12/2015 às 13:29
  • Estou tentando usar agora o waterfall mas nao consigo deixar ele com duas colunas tipo ta funcionando mas os box ficam muito pequenos e nao ficam com duas colunas
    – user27585
    29/12/2015 às 13:40
0

Olá, você pode criar um script para isso ou usar display table. Pode também colocar um clearfix a cada 2, e eles ficaram mesma linha. Com jquery, pode fazer o seguinte:

<html>
<body>
    <script>
    $(document).ready(function () {<br>
        var a = $('.altura_eventos').height();<br>
        $('.imagem_evento_ita').css("min-height", a);<br>

    });
    </script>
</body>
</html>

Pega a altura da div dos dois eventos juntas e aplica ela para os dois eventos com min-height. Ele vai pegar sempre a altura da maior no caso.

1
  • Não entendi muito bem. No meu caso os cards são adicionados dinamicamente nunca sei qual card vai vim e qual o tamanho dele iss ovai depende da ação do usuario, é como se fosse uma rede social!
    – user27585
    29/12/2015 às 12:43
0

A cada 2 li's você coloca abre uma div e coloca a classe clearfix. Ela vai deixar as duas na mesma linha. Qualquer outro problema, você coloca min-height e ele irá funcionar. Por exemplo, um min-height nas Li's que você tem alí ou no próprio container onde pega a imagem amarela ou a escrita.

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