(html) fit images in an html page

Question

There are several images in folder . I want to fit as many images as possible from the folder into an html page. The images will be selected at random and will have different width & height. I don't want the dimension of the images to change.

How can this be accomplished ?? is this doable with JavaScript ? This looks pretty complicated to me . is there a simple way of doing this via some other method (server side)?

thanks

Edit: so basically we have a room in which we want to pack as many boxes as we can , the boxes all have different size and cannot be stacked over one another..

Answer 1

It would be doable but more difficult I think in JavaScript,

You could use a server side language like PHP to do it like this:

1. load random image files
2. add up their widths and stop adding images after you've reached your desired page width (do this for height too)
3. let PHP echo out the images as html <img/> elements with a basic html layout surrounding it or an empty layout

If you could elaborate some more about the details of the page (kind of layout , etc.) I might be able to provide a more specific answer.

Hope this helps.

Update:

It's quite easy to do in php, if you would do it in javascript I would imagine the approach being something like this:

1. page with <img width="" height =""/> elements
2. using the DOM functions to get the elements and iterate through them to make a list while you are still below your maximum width and height
3. place them next to each other with CSS positioning

Answer 2

This sounds like the bin packing problem:

http://en.wikipedia.org/wiki/Bin_packing_problem

http://mathworld.wolfram.com/Bin-PackingProblem.html