Fixed masonry grid (posts).

website/public/js/masonry.js

@@ -1,37 +1,28 @@
 margin = 20;
 
-$(window).on("load", function() {
-    console.log("LOADED");
-    container = $("div.posts");
-    posts = container.children();
-    posts.remove();
-
-    column = $('<div class="column"></div>').append(posts);
-    container.append(column);
-
-    mansonry();
-    mansonry();
-});
-
 $(window).resize(function() {
     clearTimeout(window.resizedFinished);
     window.resizeFinished = setTimeout(function() {
-        mansonry();
+        masonry();
     }, 250);
 });
 
-function mansonry() {
+var $container = $(".posts");
 
+function masonry() {
+    $container.children().remove();
     columnCount = Math.floor($(".posts").width() / 250);
-    console.log("columns: " + columnCount);
 
     /*
      * Initialise columns.
      */
     var columns = new Array(columnCount);
+    var $columns = new Array(columnCount);
     for (i = 0; i < columnCount; i++) {
-        columns[i] = [0, []];
-        console.log(columns[i]);
+        $column = $("<div class=\"column\">");
+        $column.width(100/columnCount + "%");
+        $container.append($column);
+        columns[i] = [0, $column];
     }
 
     /*
@@ -45,32 +36,27 @@ function mansonry() {
                 column = columns[i];
             }
         }
-
         return column;
     }
 
     /*
-     * Rearange the objects.
+     * Get the posts from the server.
      */
-    j = 0;
-    posts.each(function(i) {
-        post = posts[i];
-        shortestColumn = getShortestColumn(columns);
-        shortestColumn[0] = shortestColumn[0] + $(post).height() + margin;
-        shortestColumn[1].push(post);
+    $.post("API/getPosts.php", { usr : userID })
+           .done(function(data) {
+               posts = JSON.parse(data);
 
-    });
-    
-    container.children().remove();
-    /*
-     * Display the objects again in the correct order.
-     */
-    for (i = 0; i < columnCount; i++) {
-        column = $('<div class="column"></div>').append(columns[i][1]);
-        console.log(column);
-        container.append(column);
+               /*
+                * Rearange the objects.
+                */
+               jQuery.each(posts, function() {
+                   $post = $("<div class=\"post platform\" onclick=\"requestPost(this)\">");
+                   $post.append($("<h2>").text(this["title"]));
+                   $post.append($("<p>").html(this["content"]));
 
-    }
-
-    $("div.posts div.column").width(100/columnCount + "%");
-}
+                   shortestColumn = getShortestColumn(columns);
+                   shortestColumn[1].append($post);
+                   shortestColumn[0] = shortestColumn[0] + $post.height() + margin;
+               });
+           });
+}