[CSS][jQuery] Płynnie zmieniany układ treści na stronie

<div class="box">
 
 
        <span>01</span>Maleski z nami ruszysz, Sędzio, mój Rejencie, prawda, bez urzędu. ogon też same szczypiąc trawę ciągnęły powoli pod strażą. Dziś piękność twą w senacie, znowu do gospody. Słudzy nie ma narowu, Żałował, że oko pańskie jachał szlachcic.
 
</div>
<div class="box inny">
 
 
        <span>02</span>Podczaszyca dwókolna dryndulka która się jak krzykną: ura! - niewola! Pamiętam, chociaż liczył lat siedzi jak mógł wyjść spotykać w paryskich kawiarniach. Bo nie był, lecz podmurowany. Świeciły.
 
</div>
<div class="box">
 
 
        <span>03</span>Hrabią sporu. I tak było jeszcze kołyszą się nie poruczy, bo tak rzadka ciche szmery a chłopi żegnali się, że go tylko się.
 
</div>
<div class="box inny">
 
 
        <span>04</span>Hrabią sporu. I tak było jeszcze kołyszą się nie poruczy, bo tak rzadka ciche szmery a chłopi żegnali się, że go tylko się.
 
</div>
<div class="box">
 
 
        <span>05</span>Podkomorstwo i byle nie był, lecz nim czerwone jak bawić się teraz za domem.
 
</div>
<div class="box inny">
 
 
        <span>06</span>Nie zmienia jej wypadł suknia, a po samotnej łące. Śród takich pól przed laty wywoła albo sam na miejscu biegało domysłów tajnie! Więc niech mi się możemy na polowanie i jąkał się moda odmieniła.
 
</div>
<div class="box">
 
 
        <span>07</span>Sędziemu tłumaczył dlaczego urządzenie pańskie konia tuczy. Wojski z nami nie jeździł na początek dać małą kiedy znidzie z uśmiechem witać lada kogo. Bo nie bywa od przodków wiarę prawa i serce mu biło.
 
</div>
<div class="box inny">
 
 
        <span>08</span>Wam tam nie miała, założyła ręce rozkrzyżował i młoda. Jej zjawienie się dawniej zdały. I włos u wniścia alkowy i zmniejsza. I przyjezdny gość, krewny pański i stają mu biło nadzwyczajnie. Więc Woźny pas mu.
 
</div>
<div class="box">
 
 
        <span>09</span>Po tem nic to mówiąc, że ją bardzo dobitnie malował. Był dawniej było z rana w końcu zażył. kichnął, aż człowiekiem zrobił. W takim nigdy nie zobaczy bo tak nazywano młodzieńca, który.
 
</div>
<div class="box">
 
 
        <span>10</span>Ojczyzn pierwszy raz zaczął, bez urzędu. ogon też same szczypiąc trawę ciągnęły powoli pod Twoją opiek ofiarowany, martwą podniosłem powiek i na polowanie i obrok, i poprawiwszy nieco poróżnieni bo tak się w Litwie chodził tępy nie skąpił. On rzekł: Wielmożni Szlachta, Bracia Dobrodzieje! Forum myśliwskiem tylko się strzelbami a potem Sędzia Podkomorzego zdał się niedawno w oszmiańskim powiecie przyjechał.
 
</div>

<div class="box"> <span>01</span>Maleski z nami ruszysz, Sędzio, mój Rejencie, prawda, bez urzędu. ogon też same szczypiąc trawę ciągnęły powoli pod strażą. Dziś piękność twą w senacie, znowu do gospody. Słudzy nie ma narowu, Żałował, że oko pańskie jachał szlachcic. </div> <div class="box inny"> <span>02</span>Podczaszyca dwókolna dryndulka która się jak krzykną: ura! - niewola! Pamiętam, chociaż liczył lat siedzi jak mógł wyjść spotykać w paryskich kawiarniach. Bo nie był, lecz podmurowany. Świeciły. </div> <div class="box"> <span>03</span>Hrabią sporu. I tak było jeszcze kołyszą się nie poruczy, bo tak rzadka ciche szmery a chłopi żegnali się, że go tylko się. </div> <div class="box inny"> <span>04</span>Hrabią sporu. I tak było jeszcze kołyszą się nie poruczy, bo tak rzadka ciche szmery a chłopi żegnali się, że go tylko się. </div> <div class="box"> <span>05</span>Podkomorstwo i byle nie był, lecz nim czerwone jak bawić się teraz za domem. </div> <div class="box inny"> <span>06</span>Nie zmienia jej wypadł suknia, a po samotnej łące. Śród takich pól przed laty wywoła albo sam na miejscu biegało domysłów tajnie! Więc niech mi się możemy na polowanie i jąkał się moda odmieniła. </div> <div class="box"> <span>07</span>Sędziemu tłumaczył dlaczego urządzenie pańskie konia tuczy. Wojski z nami nie jeździł na początek dać małą kiedy znidzie z uśmiechem witać lada kogo. Bo nie bywa od przodków wiarę prawa i serce mu biło. </div> <div class="box inny"> <span>08</span>Wam tam nie miała, założyła ręce rozkrzyżował i młoda. Jej zjawienie się dawniej zdały. I włos u wniścia alkowy i zmniejsza. I przyjezdny gość, krewny pański i stają mu biło nadzwyczajnie. Więc Woźny pas mu. </div> <div class="box"> <span>09</span>Po tem nic to mówiąc, że ją bardzo dobitnie malował. Był dawniej było z rana w końcu zażył. kichnął, aż człowiekiem zrobił. W takim nigdy nie zobaczy bo tak nazywano młodzieńca, który. </div> <div class="box"> <span>10</span>Ojczyzn pierwszy raz zaczął, bez urzędu. ogon też same szczypiąc trawę ciągnęły powoli pod Twoją opiek ofiarowany, martwą podniosłem powiek i na polowanie i obrok, i poprawiwszy nieco poróżnieni bo tak się w Litwie chodził tępy nie skąpił. On rzekł: Wielmożni Szlachta, Bracia Dobrodzieje! Forum myśliwskiem tylko się strzelbami a potem Sędzia Podkomorzego zdał się niedawno w oszmiańskim powiecie przyjechał. </div>

body {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
}
.box {
	background-color: #cccc99;
	color: #686868;
	font-family: Arial, Tahoma, serif;
	font-size: 13px;
}
.box p {
	padding: 10px;
}
.box span {
	float: left;
	font-size: 26px;
	font-weight: bold;
	padding-right: 5px;
}
div.inny {
	background-color: #66cccc;
	color: #e1e1e1;
}

body { position: relative; width: 100%; margin: 0; padding: 0; } .box { background-color: #cccc99; color: #686868; font-family: Arial, Tahoma, serif; font-size: 13px; } .box p { padding: 10px; } .box span { float: left; font-size: 26px; font-weight: bold; padding-right: 5px; } div.inny { background-color: #66cccc; color: #e1e1e1; }

var zmiennyUklad = {
	liczbaKolumn : 2,
	marginesKolumny : 10,
	szerokoscKolumny : 200,
	przebudujStrukture : function() {
		var siebie = this;
		var wskaznik = 0;
		var tablica = [];
		var kolumny = Math.max(this.liczbaKolumn, parseInt($('body').innerWidth() / (this.szerokoscKolumny + this.marginesKolumny)));
 
		$('.box').css('position', 'absolute').css('width', this.szerokoscKolumny  + 'px');
		$('.box').each(function() {
			var ukladLewy = (wskaznik * (siebie.szerokoscKolumny + siebie.marginesKolumny));
			$(this).css('left', ukladLewy + 'px');
 
			var ukladGora = 0;
			if (tablica[wskaznik]) { ukladGora = tablica[wskaznik];	}
			$(this).css('top', ukladGora + 'px');
 
			tablica[wskaznik] = ukladGora + $(this).outerHeight() + siebie.marginesKolumny;
			wskaznik++;
			if (wskaznik === kolumny) { wskaznik = 0; }
		});
	}
};
$(window).ready(function() {
	zmiennyUklad.przebudujStrukture();
}).resize(function() {
	zmiennyUklad.przebudujStrukture();
});

var zmiennyUklad = { liczbaKolumn : 2, marginesKolumny : 10, szerokoscKolumny : 200, przebudujStrukture : function() { var siebie = this; var wskaznik = 0; var tablica = []; var kolumny = Math.max(this.liczbaKolumn, parseInt($('body').innerWidth() / (this.szerokoscKolumny + this.marginesKolumny))); $('.box').css('position', 'absolute').css('width', this.szerokoscKolumny + 'px'); $('.box').each(function() { var ukladLewy = (wskaznik * (siebie.szerokoscKolumny + siebie.marginesKolumny)); $(this).css('left', ukladLewy + 'px'); var ukladGora = 0; if (tablica[wskaznik]) { ukladGora = tablica[wskaznik]; } $(this).css('top', ukladGora + 'px'); tablica[wskaznik] = ukladGora + $(this).outerHeight() + siebie.marginesKolumny; wskaznik++; if (wskaznik === kolumny) { wskaznik = 0; } }); } }; $(window).ready(function() { zmiennyUklad.przebudujStrukture(); }).resize(function() { zmiennyUklad.przebudujStrukture(); });