[jQuery] Dynamicznie zmieniana ilość kolumn w zależnie od szerokości okna przeglądarki
Ten wpis ma 17 lat. Od tego czasu przeglądarki i narzędzia mogły się zmienić, więc zanim użyjesz kodu, sprawdź go z aktualną dokumentacją.
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>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*/
}
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();
});
Tutaj jest demo z tego artykułu. Aby zobaczyć efekt wystarczy zmieniać szerokość okna przeglądarki 🙂
O autorze
