Before offering bin packaging algorithms, they suggest that you can reorder items and arrange them in any way. Please note that you are reading that I have a restriction on the order and arrangement.
Thus, it is obvious that there is no such thing as kerning divs, but this is the most suitable term that I could think of. Basically, I have many elements on the page, divs and imgs with a fixed width and height. They should remain in order (they are chronological) and should be displayed from left to right, from top to bottom. I want to “group” the elements in such a way as to make the space as uniform as possible. This is a very simple task to achieve horizontal, but vertical spaces are more complex. Non-uniform excess of the gap around the very extreme edge of the packed elements is allowed.
I thought this was a really stupid solution, I can set the maximum width of the area to be packed to about 1000 pixels. Then I could store an array with 1000 indices, tracking the bottom of this column of pixels on the screen. When I add a new element, I see if I need to move it a little in the gap, and if I move it left or right a little, it will allow it to move up.
As I said, this is really a dumb decision. Are there any algorithms that I could use, or did anyone have to deal with a similar packaging problem?
UPDATE:
For questions in the comments. Elements have an arbitrary width and height. My test example is to create 100 image tags with images from placekitten.com with random widths and heights in the range of 200-300 pixels and arrange these images on the page in the order in which they are created.
Create an html page and throw the code below into your head to get to where I am (please, no comments on the overall quality of the code, I know there are some optimizations, I literally threw this together as a demonstration in less than 10 minutes)
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
var maxwidth = window.innerWidth - 80;
function justify(row, filled)
{
var remaining = maxwidth - filled + 30,
imgs = $('img',row),
margin = Math.floor((remaining/imgs.length) / 2);
$(imgs).each(function(){ this.style.marginLeft=margin+"px";this.style.marginRight=margin+"px"});
}
$(function()
{
var row = document.createElement('div'),
filled = 0;
document.body.appendChild(row);
for (var i = 0; i < 100; ++i)
{
var img = document.createElement('img'),
width = Math.floor(200 + Math.random() * 100),
height = Math.floor(200 + Math.random() * 100);
if ((filled + width) > maxwidth)
{
justify(row, filled);
row = document.createElement('div');
filled = 0;
document.body.appendChild(row);
}
filled += width;
img.src = "http://placekitten.com/" + width + "/" + height;
row.appendChild(img);
}
justify(row,filled);
})
</script>
<style>
img{position:relative; vertical-align:middle}
</style>