OK, so in my little album app (in Flash/AS3, but language doesn't matter), each page has a 5x4 grid of photos. However, some photos I want to elevate in prominence, so instead of occupying a 1x1 space, some of them would occupy a 2x2 space.
So, if I have an array of image objects that I'm iterating, in order, to fill pages sequentially...what's the best way to keep track of a) when a page is filled and b) if a 2x2 photo will fit on given point on the grid?
For example, in this case, the first four photos (marked by x's) have been placed. The fifth photo is a 2x2...it obviously can't fit in the 1st row, 5 col. position...what's a good algorithm for deciding that it needs to be placed in the next row, and that the 1x5th position is open for the next 1x1 photo?
XXXXO OOOOO OOOOO OOOOO
It would probably be easier, if possible, to place the large images first, because then you can fill all remaining space with little ones.
So if you are pulling these pictures from a list, jump ahead in it until you find a large one (or two or three, however many you want), and place those. Then, jump back to where you started and fill with the unused images (skipping the large ones, obviously). To keep track if it is all filled, you can keep a counter that counts 1 for small images and 4 for the larger ones until it hits 20.