Tiling an area with different sized squares


Help is needed on tiling a set area with different sized square images.

I have about 100 square images ranging between 20px and 100px.

I want to crate a web page that displays these images randomly as one large square area. I know how to display them in random places the problem is I want them to fill the page with no gaps.

Hope this all makes sense.

Many thanks in advance.

If you search for 2D Bin Packing, it should put you on the right path. :wink:

Also, Marco Tabini posted a few notes on his [URL=“http://blog.tabini.ca/”]blog about this; see [URL=“http://blog.tabini.ca/2010/09/optimized-image-display-using-a-bin-packing-algorithm-part-one/”]here and [URL=“http://blog.tabini.ca/2010/09/optimizing-image-display-using-a-bin-packing-algorithm-part-deux/”]here.

Off Topic:

Hey, I just noticed you work at ne-web, cool. It’s literally 4 minutes away from me.

Thanks Anthony, I’ll have a look at those links and see if I can figure it out.

How ironic that you work close to NE-Web. If you ever need any help with anything please contact us.

Many thanks for your response.