modulus / grid layout with items of changing size
I'm trying to figure an elegant way to display a certain number of items in a grid. I have a feeling开发者_Python百科 the answer lies partly with modulus, but it's a little more complicated than that. I know how to lay out items in a grid based on a set number of columns. Something like this:
for (var j=0;j<numFiles;j++){
clip.x = clip.width * (j % cols);
clip.y = clip.width * int(j / cols);
}
but what I want to do is set things up such that if there is only one item (j=0), the image covers the entire available area (stage.Width and stage.Height or, for simplicity, 1000px, and 500px). If there are 2 items, there should be 2 columns, with the images taking up half the width of the stage and all of the height (500x500), 3 items - 3 columns (300x500), 4 items - 2 columns & 2 rows (500x250), and so on, keeping a balanced grid layout but decreasing the dimensions of the items and increasing the number of rows in some sort of logical and balanced manner.
There's got to be a way to do this mathematically, but I haven't come across it and can't seem to grasp it on my own. If anyone has ideas, I'd love to hear it. I'm doing this in Flash AS3, but any example would be useful.
this is a tricky problem :)
@ThatSteveGuy is right ; some file count might not work really well.
one way to solve it is to use a treemap or a mansonry algorithm.
an implementation of the treemap is available here: http://www.arpitonline.com/blog/downloads/treemap2/srcview/ ( article )
unfortunately it is strongly coupled to the displayList and some things are a bit weird, (like rendering mutilple rects in multiple displayObjects with various offsets) but it does the job :)
there is a code embryo for mansonry here: Programmatic Masonry / Space-FInding Layout in Actionscript
精彩评论