Fix masonry layout

[sheoranjs24]

Masonry layout does not work well with AngularJS filters. Currently, we are using timeout of ~250ms to wait for AngularJS filters to finish before we reload the masonry. This approach is not good, as the time it takes for AngularJS filters to finish is dependent on the number of items.
A better approach would be to use the dimension of the image to create an empty container. This way we don't have to rely on imageloaded and we don't have to reset/reload the masonry layout (which now creates flickering effect as it rearranges images). Also, masonry reload works well with AngularJS filters if we don't use imageloaded feature.

[scottlow]

@Clebeuf what are your thoughts on this?

[Clebeuf]

Can we use that approach if we don't know what size the images will be ahead of time?

[Clebeuf]

I think this is what pinterest does because every once in a while when you have bad wifi you see a bunch of colourful temp boxes while you wait for the images to load

[sheoranjs24]

The ImageField in django has the info of image dimension that can be send to front-end along with the image.

[sheoranjs24]

Yes, pinterest does the same.
http://stackoverflow.com/questions/7109362/how-to-replicate-pinterest-coms-absolute-div-stacking-layout, https://benholland.me/javascript/2012/02/20/how-to-build-a-site-that-works-like-pinterest.html

[scottlow]

@sheoranjs24 @Clebeuf I think that sending back image dimensions from ImageField in Django would be a suitable workaround for this. Masonry has turned out to be a real pain haha