chevron-left chevron-right

[jQuery] Dynamicznie zmieniana ilość kolumn w zależnie od szerokości okna przeglądarki

Zamierzam Tobie przedstawić ciekawy, efektowny i co najważniejsze efektywny sposób na wyświetlanie kolumn w przeglądarkach o różnych rozdzielczościach ekranu. Dzięki temu, nie trzeba będzie się martwić, że u kogoś jest zbyt dużo pustego ekranu, niezapełnionego kolumnami lub, że musi przesuwać stronę na boki by zobaczyć resztę kolumn.

Jak zwykle zaczynamy od kodu HTML:

<ul class="kolumna">
        <!--Tutaj wstawiamy listę kolumn-->
        <li>
            <div class="tresc">
             <!--Zawartość kolumny-->
            </div>
        </li>
       <!--koniec jednej kolumny-->
</ul>
Teraz pora na nieoceniony kod CSS:
ul.kolumna{
	width: 100%;
	padding: 0;
	margin: 10px 0;
	list-style: none;
}
ul.kolumna li {
	float: left;
	width: 200px;
	padding: 0;
	margin: 5px 0;
	display: inline;
}
.tresc {
	height: 355px;
	font-size: 1em;
	margin-right: 10px;
	padding: 20px;
	background: #e3e1d5;
}
.tresc h2 {
	font-size: 1.8em;
}
.tresc img {
	width: 50%;
	padding: 5%;
	background:#fff;
	margin: 0 auto;
	display: block;
	-ms-interpolation-mode: bicubic; /*zapobiega pikselacji w IE6 i IE7, to znaczy, że obraz nie będzie zbyt pikselowaty*/
}
Na koniec pozostał nam kod w JavaScript, który powoduje tą całą "magię".
function zmienneKolumny() {
	$("ul.kolumna").css({ 'width' : "100%"});
	var colWrap = $("ul.kolumna").width();
	var colNum = Math.floor(colWrap / 200);
	var colFixed = Math.floor(colWrap / colNum);
	$("ul.kolumna").css({ 'width' : colWrap});
	$("ul.kolumna li").css({ 'width' : colFixed});
}
zmienneKolumny();
$(window).resize(function () {
	zmienneKolumny();
});
To wszystko, taki kod pozwoli Tobie na efektowną prezentację treści na stronie, nie zwracając uwagi na to, kto ma jaką rozdzielczość ekranu u siebie.
Tutaj jest demo z tego artykułu. Aby zobaczyć efekt wystarczy zmieniać szerokość okna przeglądarki 🙂