Question

This question is related to this older one: Isotope Grid layout use empty space

Here is the fiddle I am working with:
http://jsfiddle.net/zewkG/4/

The issue is that when the sorting logic that works in that previous question’s answer fails as soon as the masonry cornerstamp [as coded by the creator of isotope] is added. I have been trying to figure out the logic behind this one, but unfortunately to no avail and with a lot of time wasted without a breakthrough. [There should not be any missing boxes when you click on the fifth element, as well as it shouldn’t go two lines down, just one. The first three elements should take the first line instead of going down one line.]

The above fiddle contains the sorting logic of the previous question with only the fourth column and a cornerstamp added.

Would love any help I can get!

Answer 1

See http://jsfiddle.net/zewkG/6/, I hope I understood well what you want

Edit:

If you want 21 boxes, see http://jsfiddle.net/zewkG/8/

Edit 2:

http://jsfiddle.net/zewkG/8/ has a bug: boxes number 13,17,21 (at the end of the row), when clicked, they go to the following row instead to the beginning of its row. Fixed in http://jsfiddle.net/zewkG/9/