Vanilla Masonry

masonry.js

var container, briks, brikWidth, columnCount;

window.addEventListener('DOMContentLoaded', function () {
	container = document.querySelector('#content');
	briks = document.querySelectorAll('article.image');

	for (var i = 0; i < briks.length; i++) {
		briks[i].style.position = 'absolute';
		briks[i].style.display = 'none';
		briks[i].style.opacity = 0;
	}
});

window.addEventListener('load', function () {
	if (document.body.classList.contains('s_flickr')) {

		brikWidth = 180;
		columnCount = Math.floor(container.offsetWidth / (brikWidth + 10));
		
		function setupMasonry () {
			var slots = [];
					
			for (var i = 0; i < columnCount; i++) {
				slots.push({
					left: i * (brikWidth + 10),
					top: 14
				});
			}
			
			for (var i = 0; i < briks.length; i++) {
				var slot = slots.shift();
				
				// Position brick
				briks[i].style.left = slot.left + 'px';
				briks[i].style.top = slot.top + 'px';

				briks[i].style.display = 'block';
				briks[i].style.opacity = 1;

				// Add slot below
				slots.push({
					left: slot.left,
					top: slot.top + briks[i].offsetHeight + 8
				});

				// Resort the slots by top position
				slots.sort(function (a, b) {
					if (a.top < b.top) {
						return -1;
					} else if (a.top == b.top) {
						return 0
					} else {
						return 1;
					}
				});
			}
		}
		
		setupMasonry();
		
		window.addEventListener('resize', function () {
			var newColumnCount = Math.floor(container.offsetWidth / (brikWidth + 10));
			if (newColumnCount != columnCount) {
				columnCount = newColumnCount;
				setupMasonry();
			}
		});
	}
});