chevron-left chevron-right

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

Jak wiadomo, już jest po świętach. Tak więc, pora się zabrać za napisanie kolejnego artykułu na bloga.
Dzisiejszy artykuł będzie traktował o płynnej zmianie układu treści na stronie, który jest zależny od szerokości okna przeglądarki i wielkości bloków z treścią.
Taki układ można sobie wyobrazić jako taką chmurę tagów, tyle że, zamiast tagów mamy treść (np. artykuły, moduły, zdjęcia, itp, itd.). Jest on bardzo przydatny gdy zależy nam na jak najciaśniejszym upchaniu contentu na stronie, by pozostało jak najmniej wolnej przestrzeni, która w niektórych przypadkach może źle wyglądać.
Zatem, jak to można zrobić?

Najpierw tworzymy kod HTML, będący przykładową strukturą takiej strony.

<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>

Jak widać, jest sporo tekstu w tym kodzie, ale to pomoże pokazać jak taki układ jest uzależniony od długości tekstu.
Teraz pora na styl dla naszego przykładu.

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;
}

Teraz gdybyście uruchomili swój plik ze stroną zobaczycie, że treść układa się jedna pod drugą co nie wygląda zbyt fajnie.
Kolejnym krokiem naszego "czarowania" jest dodanie kodu JavaScript, który wspomagany biblioteką jQuery (pamiętaj o tym, by ją dołączyć do kodu strony) sprawi, że nasza strona się ciekawsza wizualnie i będzie sama się dopasowywać do szerokości okna przeglądarki.

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();
});

Stworzyłem w tym kodzie własne zmienne (minLiczbaKolumn, szerokoscKolumny, marginesKolumny) aby uniknąć kolidacji z elementami, które jakimś sposobem mogą mieć podobną przestrzeń nazw. Dotyczy to w szczególności dodatkowych bibliotek lub skryptów pobranych z innych źródeł. Wydaje mi się, że kod JS jest do jasno i klarownie opisany, więc pominę dalsze jego tłumaczenie.
Dodam tylko, że kod zacznie działać dopiero po pierwszym załadowaniu strony. Potem podczas zmiany szerokości okna przeglądarki to już będzie się automatycznie dopasowywać bez zbędnego odświeżania strony.
Demo z tego przykładu jest dostępne tutaj: zmienny układ treści na stronie z użyciem jQuery