Fixed masonry grid (posts).

This commit is contained in:
K. Nobel
2017-01-26 12:20:32 +01:00
parent 977757b2d3
commit 3ebacd6251
4 changed files with 69 additions and 67 deletions

View File

@@ -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;
});
});
}

View File

@@ -2,7 +2,6 @@
<html>
<head>
<?php include("../views/head.php"); ?>
<script src="/js/masonry.js"></script>
<style>
@import url("styles/profile.css");
</style>
@@ -45,10 +44,25 @@ include("../views/footer.php");
?>
<script src="js/friendButtons.js"></script>
<script src="js/masonry.js"></script>
<script>
var posts;
$(document).ready(function() {
userID = <?= $userID ?>;
placeFriendButtons();
masonry();
// alert("blap");
// $.post("API/getPosts.php", { usr : userID }, "json")
// .done(function(data) {
// posts = JSON.parse(data);
// alert(posts[0]["content"]);
// }).fail(function() {
// alert("failure...");
// });
});
</script>
</body>