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