mosaic

gistfile1.js

var images = [
	'http://www.placekitten.com/300/300',
	'http://www.placekitten.com/300/301',
	'http://www.placekitten.com/300/302',
	'http://www.placekitten.com/300/303',
	'http://www.placekitten.com/300/304',
	'http://www.placekitten.com/300/305',
	'http://www.placekitten.com/300/306',
	'http://www.placekitten.com/300/307',
	'http://www.placekitten.com/300/308',
	'http://www.placekitten.com/300/309',
	'http://www.placekitten.com/300/310',
	'http://www.placekitten.com/300/311',
	'http://www.placekitten.com/300/312',
	'http://www.placekitten.com/300/313',
	'http://www.placekitten.com/300/314',
	'http://www.placekitten.com/300/315',
	'http://www.placekitten.com/300/316',
	'http://www.placekitten.com/300/317'
];

function buildBlocks(blocks, images){

	var blocks = [];

	function newBlock(blocks){
		blocks.push({
			lgRow: [],
			smRow: []
		});
	}

	var j = 0;
	newBlock(blocks);

	for (var i = 0; i < images.length; i++) {

		if (blocks[j].lgRow.length === 5 && blocks[j].smRow.length === 4) {
			j++;
			newBlock(blocks);
		}

		if ((blocks[j].lgRow.length >= 0 && blocks[j].lgRow.length <= 4) && (images.length - i > 4 || images.length - i >= 5 - blocks[j].lgRow.length)) {
			blocks[j].lgRow.push(images[i]);
		} else {
			blocks[j].smRow.push(images[i]);
		}
	}

	return blocks;
}

var filledBlocks = buildBlocks(blocks, images);