3

I have been over-thinking this complex and I am sure there is an easy answer or another avenue I can approach to find the solution.

What I am trying to accomplish is a random grid of images. I have an array of images that I want to line up in a flush grid. What I mean by this is that I want the grid to not have any gaps in it. Here are some example images:

example grid

Key specs:

  • Container/cell must be in a ratio that the image can fit without skewing
  • The grid must be flush. It cannot have any gaps including the last row.

The problem I am having is I cannot come up or put into words a formula that can create the table maxtrix I am trying to accomplish. Masonary is 99.9% what I am looking for except the grid does not take into account the image size nor does it end flush. So that 1% is why I am not considering using it.

I am not looking for javascript specific as this relates to math so I plan on creating the layout in PHP then powering functionality in javascript.

Any help or pointers will be appreciated.

MvG
  • 57,380
  • 22
  • 148
  • 276
csteel
  • 373
  • 1
  • 6
  • 16
  • 1
    well I suppose [2d box-packing](https://www.google.com/search?q=2d+box+packing+algorithm) is a place to start, but figuring out a way with *absolutely no chance* of empty space might take some extra tweaking and manuvering. – anson Jan 23 '13 at 02:44
  • 1
    If you are doing this in PHP, consider doing image scaling & adjustments with GD or maybe ImageMagick to ensure the layout works as you wish. Of course then you are delving into creating derivative images of the master images you are using, but dynamic aesthetics like this are not easy. – Giacomo1968 Jan 23 '13 at 02:48
  • 1
    @JakeGould That is what I plan on using exactly. That way I can make sure images are visible in their container. Just coming up with the grid matrix is where I am stuck. It's a matrix that I cannot put a word on. – csteel Jan 23 '13 at 03:06
  • @andbeyond Thanks for this! This is an interesting algorithm that can help me figure this out. Looking in to this now to see if it can help! – csteel Jan 23 '13 at 03:08
  • @MartyWallace this doesn't really solve my issue. It will know the image size prior to the image even being loaded. Appreciate the feeback though! – csteel Jan 23 '13 at 03:09
  • Sorry, *bin*-packing is the more formal term, you may get better search results with that... – anson Jan 23 '13 at 03:28
  • 1
    Maybe this will help you: [Grid generation & division](http://stackoverflow.com/questions/6997278/grid-generation-division-with-css-js-php) & [Detecting gaps in grid of divs](http://stackoverflow.com/questions/13705472/detecting-gaps-in-grid-of-divs) – PHearst Jan 26 '13 at 17:34
  • @MvG Update the image path. – csteel Jan 27 '13 at 20:01
  • @PHearst Thanks for the links. I couldn't put into a single word what I am looking for and this helps to know there are other posts similar. – csteel Jan 27 '13 at 20:02

2 Answers2

2

Your example images are alinged in rows. Furthermore, you didn't wirte anything about a fixed total size, so I assume that the aspect ratio of the whole layout can be chosen at will. In that case, you could try something along these lines:

  1. Line up all the images in a single row, by fixing the height and choosing the width in such a way that you can preserve the aspect ratio.
  2. Split that single row into multiple rows. This is where you can play with a number of heuristics, to tune the final result to your preferences. But any solution would satisfy the requirements you stated.
  3. Scale each row in such a way that they all have the same width, then stack them.

Obvious this is only a rough outline. The really hard part will be how to distribute the images onto the different rows. One goal might be combining images of similar aspect ratio, in such a way that the final images will have similar sizes. You could compute for each ratio the preferred image height which would lead to a desired image area, and then combine images with similar height requirements until the width resulting from scaling to a common height matches the width you desire for your final rows. But other aspects will play a role as well, e.g. making rows of similar width, and stuff like that.

You might find suggestions for objectives in other answers and comments, and toy with them until you find one you like.

MvG
  • 57,380
  • 22
  • 148
  • 276
0

Justified-Gallery looks like a solution for that, here is the site with examples.

Screenshot example from miromannino.com/projects/justified-gallery/

vlgalik
  • 477
  • 2
  • 6
  • 25