Achados na Interweb

Masonry, seu site com cara de Pinterest

O Pinterest é uma das maiores redes sociais de compartilhamento de imagens nos Estados Unidos, e está ganhando força a cada dia que se passa no em nosso território brasileiro. Seu design responsivo conquistou o coração de vários (inclusive a mim!) com imagens bem distribuídas e alinhadas em qualquer resolução de tela — os grids dinâmicos.

Pinterest

Esse tipo de layout inovador se deu graças ao lindo plugin do jQuery chamado Masonry (veja o site oficial). De fácil implementação, o plugin pode ser usado em vários tipos de sites como blogs, portfolios, galerias, etc. Veja alguns sites que o utilizam que servem como inspiração.

Photography by Koa Metter

 

citizenMag

 

Eva Lindeman

 

Cutest Paw

 

All Women Stalk

 

Template Brick + Mason

 

Template Hipstar

 

Template Zeences

Ideias super interessantes, não? Apesar do Masonry ser aparentemente o "pai" deste tipo de layout responsivo, há também o Wookmark e Isotope que também auxiliam para atingir este resultado.


Comentários

  • Carol

    Vi sobre isso em um tumblr de html. Lá elas explicaram como colocar pra que o theme em grade pegasse de uma forma que não usasse height com valor. Dá super certo. Esse script é incrivel, foram que tem vários jeitos de usar ele. *-*

  • Roberta Premal

    Que ótima a sua dica, obrigada! Vou dar uma xeretada no site do plugin e estou pensando seriamente em implementá-lo no meu blog. :)

  • Day

    Oi Ana Flávia
    Tdo bem?
    Menina, há um tempo atrás eu estava louca por um plugin assim para fazer galeria em meu blog. Uma pena eu não estar com tempo agora para estuda-los e tentar aplicar… :/
    Mas vou salvar seu post aqui p no fim do mês – qdo eu estiver livre do concurso – eu tentar!!

    Beeijos

    • Ana Flavia

      Oi @Day, tudo joia e você?
      Menina, tu pode usa-lo sem medo. Super recomendo! É bem fácil de mexer. Inclusive lá no site oficial tem a versão sem precisar usar o jQuery, caso tenha receio de usar biblioteca de plugin e só queria usar um script rápido ;)

  • May

    Oi Ana!
    Adorei saber um pouco mais sobre esse plugin, realmente é muito útil!

    Beijinhos,
    May

    • Ana Flavia

      Muito útil mesmo @May, já usei ele em um projeto e o resultado foi ótimo ;)

ir ao topo