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?
This is the goal for the layout:
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 :)
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.
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.
You must be logged in to reply to this topic.