Search code examples
javascriptjquerygridgraphic

How to program a complexe images grid with javascript


For a portfolio website, I'll have to develop a visual grid of images.

I am now doing tests for this grid.

I have two alternatives:

1.A simple grid, with vertical alignments, like the one on this wireframe: http://daviddarx.com/stuffs/work/barbu/wireframe/search/simple.png

There is several plugins to do that, and I could easily develop a custom solution, if necessary. But this grid is a bit too simple and common. I would love to get a more complexe grid like this one:

2.A complexe grid, without any vertical or horizontal alignment, like the one on this wireframe: http://daviddarx.com/stuffs/work/barbu/wireframe/search/complexe.png

But for this one, I really don't see how to start to develop it, conceptually.
So here are my questions:

-I would love to develop a custom grid, to get exactly what I want. Do you have any advices, strategies, tutorials about how to develop such a grid? Which steps, how to start it, etc...

-If else, do you know any plugin or library which could achieve that?

Thank you in advance for your help! David


Solution

  • This jQuery plugin might do what you want: http://isotope.metafizzy.co/

    If that doesn't do it, please explain why and I'll try to see if I can think of a different solution.