title: layout algorithm for tightly-packed image thumbnails
body: <p>I'm working on an image gallery and I'd like to tightly pack the image thumbnails.  The thumbnails are:</p>
  
  <ul>
  <li>different aspect ratios</li>
  <li>available at the same source resolution (longest edge 256 pixels)</li>
  </ul>
  
  <p>I'd like to come up with an optimal solution (will probably have to be a heuristic) that allowed me to balance:</p>
  
  <ul>
  <li>the padding between each thumbnail (preferably constant)</li>
  <li>the consistency of thumbnail size (preferably all the same size)</li>
  <li>the amount of each image that gets cropped for the display (preferably none)</li>
  <li>the proximity of images consistent with their sort order (preferably sort-neighbours will be near one another in the grid)</li>
  </ul>
  
  <p>I think this is a variant of the <a href="http://en.wikipedia.org/wiki/Packing_problem#Different_rectangles_in_a_rectangle" rel="nofollow">rectangle packing problem</a>.</p>
  
  <p>I've found some good references: <a href="http://www.codeproject.com/Articles/210979/Fast-optimizing-rectangle-packing-algorithm-for-bu" rel="nofollow">Fast Optimizing Rectangle Packing Algorithm for Building CSS Sprites</a></p>
  
  <p>But I wanted to check with the experts to see if anyone knows of:</p>
  
  <ul>
  <li>any established algorithms that are available publicly,</li>
  <li>any open source libraries that implement them or</li>
  <li>any other mathematical references or guidance that might help me produce something as good as: <a href="http://labs.tineye.com/multicolr#colors=4b669e;weights=100" rel="nofollow">http://labs.tineye.com/multicolr#colors=4b669e;weights=100</a>;</li>
  </ul>