<ol id="biblioteka"></ol>
<!--
Wersja CSS (bez JS):
https://codepen.io/Rafiozoo/pen/rWmpJb
-->
#biblioteka {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	align-content: flex-end;
	min-height: 100vh;
	width: 94%;
	margin: 0 auto;
}
#biblioteka > * {
	display: inline-block;
	margin-top: 20px;
	margin-right: 1px;
	writing-mode: tb-rl;
	text-align: center;
	font: 13px sans-serif;
	color: #FFF;
}
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
body {
	background: #311;
}
var ilosc_ksiazek = 1000;
var licznik = 0;
setInterval(function() {
	var biblioteka = document.getElementById('biblioteka');
	if (licznik < ilosc_ksiazek) {
		var ksiazka = document.createElement('li');
		ksiazka.innerHTML = ++licznik;
		biblioteka.appendChild(ksiazka);
		var wsp_rozmiaru = Math.floor(Math.random()*10);
		ksiazka.style.height = 70+wsp_rozmiaru*2+'px';
		ksiazka.style.width = 15+wsp_rozmiaru+'px';
		ksiazka.style.lineHeight = Math.round(12.5+wsp_rozmiaru*.7)/10;
		ksiazka.style.background = 'rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')';
		if (!(licznik%10)) {
			window.scrollBy(0,108);
		}
	}
}, 50);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.