Question

I’m looking for something and i do not know what it is called or where i can find the necceracry information.

http://ricklancee.com/jquery-layout

^
So what i got now is a website with a wrapper with 100% width (current browser width), within this i have placed an number of elements with a fixed with (240px) and float: left;
when i make the window smaller they will position them selfs under each other.

What i want them to do when they float under eachother –and back– is animate to that position.

http://masonry.desandro.com/ shows an example when you resize the window the elements will float/animate to the new position.

Can anyone tell me how this is done, what this technique is called or where can i find how this is done?

I do not which to use an plugin, just script it myself for educational purposes.

Thank you very much,

Answer 1

With a float the browser handles that sort of thing.

If you want to do it yourself it’s gonna get complicated.

You will need to absolutely position the divs. position: absolute; – and make sure the parent div has position: relative; Then add an listener to watch for the resize event, and when the resize event is called calculate the new position of the divs.

See: http://api.jquery.com/resize/

Actually animating them to their new home is easy – just $(....).animate({top: xx, left: xx}). The hard part will be calculating where they should go.

Certainly doable though.

When you bind the resize event use .one(), so you only get called once. Then when you are called add a setTimeout() to delay the actual calculation for 1/2 a second. And then calculate the position and animate it.

Only when the animation is done, bind the event again. You don’t want to bind before that or you’ll have multiple animations running at the same time. (Make sure to bind only in one of the animations, not all of them since you will have multiple divs that get animated.)