bevacqua/lyst-layout.html

## lyst-layout.html
<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
	<title>Kittens - Lyst</title>

	<style>
		body {
			width: 490px;
			margin: 20px auto 0;
		}

		.column {
			vertical-align: top;
			width: 470px; /* don't allow multiple items to break layout */
		}

		.images {
			column-count: 2;
			column-gap: 20px;
			-webkit-column-count: 2;
			-webkit-column-gap: 20px;
		}

		.kitten {
			margin-bottom: 20px;
		}

		.scroll-top {
			cursor: pointer;
			background-color: #379c09;
			border: none;
			padding: 9px 5px 11px;
			position: fixed;
			top: 20px;
			right: 20px;
			opacity: 0;
			pointer-events: none;
			transition: opacity 0.5s ease-in-out;
			-webkit-transition: opacity 0.5s ease-in-out;
		}

		.arrow-up {
			width: 0;
			height: 0;
			border-left: 12px solid transparent;
			border-right: 12px solid transparent;
			border-bottom: 10px solid #fff;
		}

		.scroll-visible {
			opacity: 1;
			pointer-events: initial;
		}

		@media only screen and (min-width: 980px){
			body {
				width: 960px;
			}

			.column {
				display: inline-block;
			}

			.column:first-of-type {
				margin-right: 20px;
			}
		}
	</style>
</head>
<body>
	<script>
		!function(){
			'use strict';

			var model = [[
					{ x:225, y:300 },
					{ x:225, y:250 },
					{ x:470, y:470, gap: false },
					{ x:225, y:350 }
				],[
					{ x:225, y:275 },
					{ x:225, y:225 },
					{ x:225, y:300 },
					{ x:225, y:325 },
					{ x:470, y:470, gap: false },
					{ x:225, y:150 },
					{ x:225, y:370 }
				]], gapNode;

			function kittenize(){
				var fragment = document.createDocumentFragment(),
					section, i = 0;

				for(; i < model.length; i++){
					section = createSection(model[i]);
					fragment.appendChild(section);
				}

				document.body.appendChild(fragment);
			}

			function createSection(dimensions){
				var section = document.createElement('section'),
					img, gap, kitten, i = 0;

				for(; i < dimensions.length; i++){
					kitten = dimensions[i];
					img = document.createElement('img');
					img.className = 'kitten';
					img.src = 'http://placekitten.com/' + kitten.x + '/' + kitten.y

					if(kitten.gap !== false){
						gap = gap || createGapNode(section);
					}else{
						gap = null;
					}

					(gap || section).appendChild(img);
				}

				section.className = 'column';
				return section;
			}

			function createGapNode(section){
				var gap;

				if(!gapNode){
					gapNode = document.createElement('div');
					gapNode.className = 'images';
				}
				gap = gapNode.cloneNode();
				section.appendChild(gap);
				return gap;
			}

			kittenize();
		}();

		!function(){
			'use strict';

			var scrollTop,
				rvisible = / *scroll-visible/,
				scrollTimer;

			function scrollTopButton(){
				var arrow = document.createElement('div');
				arrow.className = 'arrow-up';

				scrollTop = document.createElement('button'),
				scrollTop.appendChild(arrow);
				scrollTop.className = 'scroll-top';
				scrollTop.addEventListener('click', scrollTopClick);

				document.addEventListener('scroll', scrolling);
				document.body.appendChild(scrollTop);
			}

			function scrolling(){
				var unit = window.innerHeight, // viewport height
					here = document.body.scrollTop, // scroll position
					foo = 60, // allow the user to rebound a little
					visible = rvisible.test(scrollTop.className);

				if(!visible && here > unit){
					scrollTop.className += ' scroll-visible';
				}else if(visible && here < unit - foo){
					scrollTop.className = scrollTop.className.replace(rvisible, '');
				}
			}

			function scrollTopClick(){
				if(scrollTimer){
					return;
				}
				scroll();
			}

			function scroll() {
				var offset = -50, interval = 10;

				if (document.body.scrollTop !== 0){
					window.scrollBy(0, offset);
					scrollTimer = setTimeout(scroll, interval);
				}else{
					scrollTimer = clearTimeout(scrollTimer);
				}
			}

			scrollTopButton();
		}();
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8'>
	<title>Kittens - Lyst</title>

	<style>
	body {
	width: 490px;
	margin: 20px auto 0;
	}

	.column {
	vertical-align: top;
	width: 470px; /* don't allow multiple items to break layout */
	}

	.images {
	column-count: 2;
	column-gap: 20px;
	-webkit-column-count: 2;
	-webkit-column-gap: 20px;
	}

	.kitten {
	margin-bottom: 20px;
	}

	.scroll-top {
	cursor: pointer;
	background-color: #379c09;
	border: none;
	padding: 9px 5px 11px;
	position: fixed;
	top: 20px;
	right: 20px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s ease-in-out;
	-webkit-transition: opacity 0.5s ease-in-out;
	}

	.arrow-up {
	width: 0;
	height: 0;
	border-left: 12px solid transparent;
	border-right: 12px solid transparent;
	border-bottom: 10px solid #fff;
	}

	.scroll-visible {
	opacity: 1;
	pointer-events: initial;
	}

	@media only screen and (min-width: 980px){
	body {
	width: 960px;
	}

	.column {
	display: inline-block;
	}

	.column:first-of-type {
	margin-right: 20px;
	}
	}
	</style>
	</head>
	<body>
	<script>
	!function(){
	'use strict';

	var model = [[
	{ x:225, y:300 },
	{ x:225, y:250 },
	{ x:470, y:470, gap: false },
	{ x:225, y:350 }
	],[
	{ x:225, y:275 },
	{ x:225, y:225 },
	{ x:225, y:300 },
	{ x:225, y:325 },
	{ x:470, y:470, gap: false },
	{ x:225, y:150 },
	{ x:225, y:370 }
	]], gapNode;

	function kittenize(){
	var fragment = document.createDocumentFragment(),
	section, i = 0;

	for(; i < model.length; i++){
	section = createSection(model[i]);
	fragment.appendChild(section);
	}

	document.body.appendChild(fragment);
	}

	function createSection(dimensions){
	var section = document.createElement('section'),
	img, gap, kitten, i = 0;

	for(; i < dimensions.length; i++){
	kitten = dimensions[i];
	img = document.createElement('img');
	img.className = 'kitten';
	img.src = 'http://placekitten.com/' + kitten.x + '/' + kitten.y

	if(kitten.gap !== false){
	gap = gap \|\| createGapNode(section);
	}else{
	gap = null;
	}

	(gap \|\| section).appendChild(img);
	}

	section.className = 'column';
	return section;
	}

	function createGapNode(section){
	var gap;

	if(!gapNode){
	gapNode = document.createElement('div');
	gapNode.className = 'images';
	}
	gap = gapNode.cloneNode();
	section.appendChild(gap);
	return gap;
	}

	kittenize();
	}();

	!function(){
	'use strict';

	var scrollTop,
	rvisible = / *scroll-visible/,
	scrollTimer;

	function scrollTopButton(){
	var arrow = document.createElement('div');
	arrow.className = 'arrow-up';

	scrollTop = document.createElement('button'),
	scrollTop.appendChild(arrow);
	scrollTop.className = 'scroll-top';
	scrollTop.addEventListener('click', scrollTopClick);

	document.addEventListener('scroll', scrolling);
	document.body.appendChild(scrollTop);
	}

	function scrolling(){
	var unit = window.innerHeight, // viewport height
	here = document.body.scrollTop, // scroll position
	foo = 60, // allow the user to rebound a little
	visible = rvisible.test(scrollTop.className);

	if(!visible && here > unit){
	scrollTop.className += ' scroll-visible';
	}else if(visible && here < unit - foo){
	scrollTop.className = scrollTop.className.replace(rvisible, '');
	}
	}

	function scrollTopClick(){
	if(scrollTimer){
	return;
	}
	scroll();
	}

	function scroll() {
	var offset = -50, interval = 10;

	if (document.body.scrollTop !== 0){
	window.scrollBy(0, offset);
	scrollTimer = setTimeout(scroll, interval);
	}else{
	scrollTimer = clearTimeout(scrollTimer);
	}
	}

	scrollTopButton();
	}();
	</script>
	</body>
	</html>