Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Image Grid Like Google Search

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #33505
    AntonNiklasson
    Participant

    Hey guys! I need some help…

    I’m currently designing a portfolio and I would really like the grid of images to kinda look like the image search at Google.

    These is what “describes” the grid, and what I’m trying to create:

    1. Images are sorted in rows, expanding to fit the highest image.
    2. Images are pushed all the way to both the left and right edge. I think it’s something like text-align: justify;
    3. An image can be of any height, the grid will adjust.

    I would say that I’m pretty damn close. This is what I’ve got so far: http://kunder.antonniklasson.se/VictoriaCleverby/portfolio.php

    I would prefer the markup that I’m using, staying away from ugly tables. And also no javascript if it’s possible.

    Thanks!

    #83154
    Mottie
    Member

    Hi Anton!

    Have you checked out the jQuery Masonry plugin? Using it is like having a “float:top” css option, or if you need the images as you described above, then check out this plugin I modified from this post. :)

    Edit: Oh oops… no javascript eh? So what exactly are you wanting? It looks like you might have it.

    #83474
    AntonNiklasson
    Participant

    Yip, I’ve seen Masonry! Looks really nice.

    I’m trying to create some sort of recipe for the grid so that it’s possible to make the images any height. As for now, a really tall image will mess up the layout.

    I would love to have the grid behave like a table. Every row adjusts to the tallest image, and the margins and whitespace stay intact. I was hoping to do this with the markup I’m using right now and no JS, but that may not be possible…

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘Other’ is closed to new topics and replies.