Forums

This topic contains 11 replies, has 5 voices, and was last updated by  Redfredg 2 years, 4 months ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #34338

    nilsw
    Member

    Hi, I’m interested to layout many images with different aspect ratios into rows of uniform height. Has anyone ever done this before with CSS or Javascript? The fancy term for this is called Strip Treemap algorithm. Is this a hard or easy problem to solve with CSS? Any tips or insight is greatly appreciated.

    #87118

    Johann
    Member

    simple, but hey:

    http://jsfiddle.net/V3Dks/

    #87131

    nilsw
    Member

    Thanks Johann, this is a really great resource.

    #87133

    thomas
    Member

    Here are some useful jQuery plugins for aligning elements of various dimensions, although they might be overkill for what you need:

    http://isotope.metafizzy.co/
    http://masonry.desandro.com/

    #87188

    nilsw
    Member

    ok, Johan’s solution is a step in the right direction, but with text-align:left there is a bunch of dead space on the right and vice-versa. With text-align: center there is uneven spaces around the sides.

    The isotope plugin that thomas proposed is really awesome, but not exactly what I’m looking for. I want there to be some way to dynamically resize the max row height on a per row basis in order to make sure images are packed evenly to both the left & right sides.

    The super-techinical way of doing this is to measure all the images and re-order them, but this is a bit complicated (Strip Treemap algorithm). Plus, what if re-ordering the images is not an option as it is in my case?

    #87395

    nilsw
    Member
    #87401

    Johann
    Member

    well they are using super-technical ways to do this for sure — whenever you resize the page, it serves completely different thumbnails of exactly the needed size. you can do it without going to such extremes, but you can’t do it without javascript I think..

    #87411

    nilsw
    Member

    Talk to me about your Javascript ideas. Some kind of algorithm to measure all the images, add a certain number to a row, then re-scale each image so they will fill to the edges of a known width? This way each row of images has a different height, one which will allow the combined widths of images in that row (plus padding) to equal the known container width (say 1020px or something).

    #87421

    Johann
    Member

    yeah. let’s say you have a desired row height like 150px..

    – take first/next image, check how wide it would be when 150px high. add that to the row width.

    – if that makes the row wider than the container width and the picture is the first (and so far only one) in the row, shrink as much as needed and go to next row. (that’s an extreme case that should rarely happen but hey, never say never)

    – if it makes the row wider than the container width, but is not the only picture in the row, you now stretch all thumbs by the necessary factor. as you said, that would give rows varying heights. I guess rounding variations could make stuff imperfect here, so maybe it would be simples to allow for a bit of padding and use text-align: justify on top of all this.

    uhm, good luck :)

    #87793

    nilsw
    Member

    hmm, yes, I was just having the same idea. it works to use

  • when all the images are the same height, but for this it will need to be

    since each row will need to be a different height… I think I’ve got the algorithm, now on to coding it! There are also a few special cases that might need to be accounted for.

    #244732

    lorenzoh
    Participant

    Hi! I’ve created a jQuery plugin that does this, check it: http://jquery-mosaic.tin.cat

    #244925

    Redfredg
    Participant

    I have proposed a dynamic programming algorithm for packing images in a grid of completely filled rows of uniform widths. By allowing each row to be of a different hight and finding the optimal placements of line-breaks the desired packing is achieved. By performing a scaling post-process each line is guaranteed to be exactly as wide as the desired width.

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star