CODEWITHSUNDEEP
iphoneobjective-calgorithmlayout
midas06
midas06

Reputation: 2001

Algorithm for laying out images of different sizes in a grid-like way

I'm trying to lay out images in a grid, with a few featured ones being 4x as big. I'm sure it's a well known layout algorithm, but i don't know what it is called.

The effect I'm looking for is similar to the screenshot shown below. Can anyone point me in the right direction?

UPDATED To be more specific, lets limit it to the case of there being only the two sizes shown in the example. There can be an infinite number of items, with a set margin between them. Hope that clarifies things.

enter image description here

Upvotes: 2

Views: 2757

Answers (2)

Cybercartel
Cybercartel

Reputation: 12582

This problem can be solved with a heatmap or a treemap. Heatmaps often use space-filling-curves. A heatmap reduces the 2d complexity to a 1d complexity. A heatmap looks like a quadtree. You want to look for Nick's hilbert curve quadtree spatial index blog.

Upvotes: 0

Jason Davies
Jason Davies

Reputation: 4693

There is a well-known layout algorithm called treemapping, which is perhaps a bit too generic for your specific problem with some images being 4x as big, but could still be applicable particularly if you decide you want to have arbitrary sizes.

There are several different rectangular treemap algorithms, any of which could be used to visualise photos. Here is a nice example, which uses the strip algorithm to lay out photos with each size proportional to the rating of the photo.

Upvotes: 4

Related Questions