Visual Sorting array of images in Javascript using CSS3

Problem

Check out this demo by FaTaL. It is explained in his blog that he has used CSS3 :target and transitions to achieve this "visual sorting" of images. The target positions have been hard coded in pres.css

The problem is that my array of images is generated at real time. Here is a demo. I want to "visually sort" these images (on button click) alphabetically by file name. How can I achieve such functionality with CSS3 without hard coding the positions ? A JSON object of filename and other parameters will be available at runtime for the sorting.

Problem courtesy of: user1058322

Solution

This is exactly the kind of stuff I was looking for http://isotope.metafizzy.co/ Hope it also helps some of you out there.

Solution courtesy of: user1058322

Discussion

I could not think of any CSS solution. So, here is my pure Javascript solution. Live at http://jsfiddle.net/uhAEA/1/.

It sorts based on the value set on each a tag's sortelm attribute.

Discussion courtesy of: AppleGrew

This recipe can be found in it's original form on Stack Over Flow.