Click here to Skip to main content
15,849,996 members
Please Sign up or sign in to vote.
2.00/5 (1 vote)

Please help me find a control that achieves this effect[^], given an assortment of images and some constraints.

There is probably a term for this effect, but when I search for tiles, tiling, mosaic, collage, etc., each of these terms has its own meaning for something else.

Thanks.
Posted
Updated 23-Jul-13 5:29am
v3
Comments
Sergey Alexandrovich Kryukov 23-Jul-13 12:42pm    
First of all, it looks way too easy. What's the problem. http://whathaveyoutried.com?
Secondly, if you still need help, start from tagging your imaging library, as the approaches are quite different (WPF, System.Drawing. what's the application type?)
—SA
onelopez 24-Jul-13 0:44am    
you could try looking into the algorithms used to "package" images together in Css Sprites generator. Not really sure what the term is either, I always search under Css Sprite generator C# and get some decent results.
Perhaps if you find the algorithm you want, then you can apply it to controls as well. But they already must have their size predefined, of course.
Yvan Rodrigues 24-Jul-13 10:45am    
Like I said, I tried searching for tiles (results are mostly Metro tiles), tiling (results are grids), mosaic (results are photomosaics), collage (results are mostly overlapping images to form a shape).

I imagine there is a name for the effect I'm looking for, but I don't know what it is.

As far as libraries go, I'll work with whatever I find, though System.Drawing would be nice.

When you say it looks way too easy, do you mean finding a component, or creating one? I'm trying to avoid reinventing the wheel.
Sergey Alexandrovich Kryukov 24-Jul-13 10:54am    
I mean creating. This is not the invention, but rather some ad-hoc algorithm, so your saying about reinventing the wheel is not really applicable. Too particular case, so finding and modification of the code sample will take more time then development. To me, it looks absolutely obvious.
—SA
Yvan Rodrigues 24-Jul-13 11:24am    
To slap the images into a predetermined grid pattern would take no time at all; however an intelligent algorithm might need to consider: overall width and height; optimal tile size; how to decide which images to make big and small; how to optimally crop rectangular images to suit square tiles; best fit of large, medium, small tiles to fill a specified space; how to handle a shortage of images; etc. No trivial task.

1 solution

The effect I was looking for doesn't seem to have a commonly accepted name, but does go by dynamic grid layout and cascading grid layout.

I haven't found a nice server-side component yet, but with ryanb31's help my searches for jquery tiling did lead me to these, and a client-side component might do the trick.

Masonery[^]

Isotope[^]

There is also a commercial component called Packery.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900