É possível criar um layout parecido com o pinterest apenas com o Bootstrap?

Eu estou tentando entender isso há algum tempo agora:

É possível criar um layout pinterest apenas com o Twitter Bootstrap? Eu sei que existem Plugins jQuery como Maçonaria, mas não há nenhuma maneira sem eles?

obrigado

Encontrou um modelo (gratuito) em http://bragthemes.com/demo/pinstrap/ . É suposto ter tudo o que você está pedindo. Não tive tempo para verificar isso, no entanto.

Edit 2016-03-15 : Bootstrap 4 permite isso fora da checkbox aqui . Ainda está em alfa, mas estamos chegando lá.

Encontrei esta solução, funciona dentro de bootstrap (funciona mesmo sem definir tamanhos de coluna), não requer JavaScript – eu encaixei em um projeto e funciona lindamente:

http://www.bootply.com/118335

Abençoe você @katiejones !

EDIT: Este é agora fora da checkbox no boostrap 4 http://v4-alpha.getbootstrap.com/components/card/#card-columns

Coisa certa. Demorei um pouco para me exercitar. Espero que isto ajude!

Desculpas para o despejo de código, mas é necessário mostrar a grade funcionando.

           

Thumbnail label

Lorem ipsumLorem ipsum dolosit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit.

Thumbnail label

Lorem ipsumLorem ipdolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit.

Thumbnail label

Lorem ipsumLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit.

Thumbnail label

Lorem ipsumLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit.

Thumbnail label

Lorem ipsumLorem ipsum dolor ctetur adipisicing eli dolor sit amet, consectetur adipisicing elit.

Thumbnail label

Lorem ipsumLorem ipdolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit.

Thumbnail label

Lorem ipsumLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit.

Thumbnail label

Lorem ipsumLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit.

Thumbnail label

Lorem ipsumLorem ipsum dolor ctetur adipisicing eli dolor sit amet, consectetur adipisicing elit.

Sim, é possível, mas com algumas limitações.

Princípio

  • Cada coluna é uma div (ou section dependendo do significado do seu layout)
  • Dentro de cada coluna, cada bloco também é um div ou img dependendo do seu design.

Prática

Para fazer as colunas, você pode usar as seguintes técnicas:

  • float as colunas
  • display: inline-block as colunas
  • Use a nova API de checkbox flexível (implementações não-padrão estão surgindo nos navegadores modernos)
  • Use a nova API de posicionamento da grade (embora eu tenha evitado isso por enquanto, pois não é suportado de forma alguma)

Em seguida, coloque vários blocos ( div s) em cada coluna. Novamente, dependendo do seu design / layout, você pode replace os divs da coluna por ul s e ter uma lista de blocos ( li s). Eu não posso falar se isso é semanticamente correto para o seu design.

Limitações

  • O redimensionamento da página do Pinterest mantém a posição geral da maioria dos elementos, ou seja, elementos no topo de uma coluna geralmente ficam próximos do topo, mesmo quando o número de colunas é ajustado para a largura do navegador – a solução CSS pura não faz isso checkbox .

Argos de trabalho

  • Embora não seja uma solução perfeita, você pode usar consultas de mídia para influenciar a posição de vários elementos.

Com algum tempo, pode-se chegar muito perto do layout do Pinterest – isso significa que provavelmente há uma boa razão para eles escolherem implementar esse layout com JavaScript.

Eu sei que minha resposta está atrasada. mas só queria que essa pergunta comum ficasse desatualizada. Eu descobri 3 implementações mais recentes.

  • isótopo . Encontrei este no site de bootstrap. Funciona bem com o scroll infinito para criar páginas da web de rolagem infinitas também.
  • Salvatore . Isso é feito com CSS e JS puros. O JS é usado apenas para extrair dados.
  • masonry.desandro.com . Esta é uma implementação intensiva do JS. mas tem suas próprias características.

Lá nós temos uma coisa chamada: bootstrap-waterfall:
http://mystist.github.io/bootstrap-waterfall/

Mas, na verdade, esse plugin não precisa de bootstrap, pois são dependencies. Depende se você quer usar o bootstrap como marcações do seu pin ou simplesmente estilizar você mesmo.

 
Card image cap

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Card image cap

Card title

This card has supporting text below as a natural lead-in to additional content.

Card image cap

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Para todos que não querem passar pelo incômodo de compatibilidade entre navegadores, aqui está uma solução PHP. Supondo que você tenha seus dados em uma matriz,

   

title

caption