How to make silde like homepage of adidas.com with jquery

Question

adidas.com so cool !!!!!!!!!!

why not with jQuery, CSS & HTML?

How div with different height & width together fill up div container when height & width are get random from database?

Someones help me?

Answer 1

Mmmhhh... seem something really complex to do it in jquery and css, surely it can be done, but will be pretty painfull palying with the dom/css in that way and keeping it working cross-browsers.

And i dont think it will worth the effort.

I think flash is the solution if that is what you need.

EDIT: is quite impossibile to reproduce exactly the effect with jquery and css.

Go with flash if you really need that effect.

Answer 2

It would be quite difficult to reproduce in jQuery but there is a jquery plugin called jQuery Masonry that arranges elements vertically then horizontally according to a grid.

http://desandro.com/resources/jquery-masonry

You could then start to apply sliding effects to each block element using a the hover function and css. There's a good tutorial here

http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-day-7

Answer 3

thank to all thank to Nick Lowman for masonry plugin , i like it :D When i visited adidas.com , i thought about something like gallery images + effect from adidas.com . Images were uploaded to database, then take 20 images to show in div container width =1000px & height=600px . They have diffrent size of images ,have div with smaller size than image size. Sort all div in container div with masonry plugin.It's not perfect but enough. Now when i mouseover or mouseout a div , it has fullsize of image or resize smaller, and another div are resized depend on div is hover-ed >.< .How? it's crazy??? When i call page again , take random images :-s My goal is CMS gallery + effect like adidas.com ,i dont know Flash , i think Flash cann't :D. Someone has same idea :D