Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Programmatically arrange rectangular UI objects in an abstract way, without gaps

Given a collection of say, 50, images with various widths and heights, how would one go about programmatically arranging them in an interesting* abstract way? (see image below)

enter image description here

  • By interesting I mean, no large gaps, and no easily distinguishable rows or columns (negative space forms a lot of T-like intersections).

For my specific case, all images have a set max dimension of 150px, which could mean the height OR width is a max of 150px (could be 150px by 450px, or 378px by 150px).

This seems like it could be a classic programming challenge but I'm finding the topic hard to Google...

EDIT: Changed image to show that there is no restriction on how the overall arrangement must be (doesn't have to fit inside a set area)

like image 622
andrhamm Avatar asked Feb 15 '12 16:02

andrhamm


1 Answers

If you are not opposed to jquery plugin, you can check this out - http://masonry.desandro.com/

like image 56
rchiriboga Avatar answered Nov 24 '22 23:11

rchiriboga