- This topic is empty.
September 13, 2011 at 4:32 pm #34338
Thanks Johann, this is a really great resource.September 13, 2011 at 10:13 pm #87133thomasMemberSeptember 14, 2011 at 1:19 pm #87188
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?September 16, 2011 at 3:44 pm #87395
This is the goal for the layout:
https://plus.google.com/photos/107671704413122133444/albums/5646888504254171681September 16, 2011 at 5:05 pm #87401
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 :)September 22, 2011 at 8:52 pm #87793
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.August 19, 2016 at 1:49 am #244732lorenzohParticipant
Hi! I’ve created a jQuery plugin that does this, check it: http://jquery-mosaic.tin.catAugust 25, 2016 at 9:46 pm #244925RedfredgParticipant
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.
- The forum ‘CSS’ is closed to new topics and replies.