The box rearrangement algorithm in stack exchange site list page

Question

I am curious about one interesting and creative feature in this stackexchange page, which lists out all the stackexchange sites in grid style.

When I click on one site box, it will grow bigger and its surrounding boxes will be rearranged to fit in the whole picture.

How does the rearrangement algorithm work? Any ideas?

Answer 1

Well judging by the source code they are using jQuery isotope plugin, its source code is here. You might also want to take a look at masonry.

Here you can find some explanation on how it can be done: http://benholland.me/javascript/how-to-build-a-site-that-works-like-pinterest/