2015/01/06

Cegiełkowy układ postów na blogu oraz stronie www

W tym poście poruszę dosyć ważny temat dotyczący popularnego trendu w tworzeniu designu stron www i blogów. Chodzi o układ cegiełkowy. W odróżnieniu od układu kafelkowego, którego elementy są symetrycznie położone względem siebie - układ cegiełkowy, jak sama nazwa wskazuje, charakteryzuje się "nachodzeniem" na siebie poszczególnych elementów, co przypomina mur zbudowany z cegieł. Tego typu layout możesz znaleźć np. na stronie Pinterest.
Układ ten najbardziej nadaje się do witryn zawierających portfolio oraz galerię zdjęć, jak np. widać na stronie fotografa Erika Johanssona.
Webmasterzy coraz częściej wykorzystują układ cegiełkowy do tworzenia szablonów na Bloggera. Poniżej widzisz screen nowoczesnego szablonu Escalate (demo), który możesz pobrać zupełnie za darmo stąd.
Za układ tego typu odpowiada biblioteka jQuery. Poniżej podaję najpopularniejsze strony oferujące za darmo skrypty, dzięki którym stworzysz własny cegiełkowy design.

Skrypty

Masonry

Packery

Nested

Wookmark

Isotope

Freetile.js

Tworzenie układu cegiełkowego

1. My posłużymy się najpopularniejszym skryptem, służącym do tego celu, jakim jest Masonry. Ze strony pobierz plik masonry.pkgd.min.js, umieść go na zewnętrznym hostingu plików oraz zastosuj w dokumencie HTML:

<html>
<head>
<title>Masonry Layout with Masonry Plugin</title>
</head>
<body>
<script src='http://masonry.desandro.com/masonry.pkgd.min.js'></script>
</body>
</html>

2. Teraz do powyższego elementu dodaj listę elementów oznaczonych klasami oraz arkusz stylu:
<html>
<head>
<title>Masonry Layout with Masonry Plugin</title>
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.item {
width: 50px;
height: 50px;
float: left;
background: #2296DD;
border: 2px solid #333;
}

.item.thumbnail {
width: 100px;
height: 100px;
background: #cfcfcf
}

.item.medium {
width: 150px;
height: 50px;
background: #A6E392
}

.item.large {
width: 200px;
height: 100px;
background: #D092E3
}
</style>
</head>
<body>
<div id='masonry'>
<div class="item"></div>
<div class="item"></div>
<div class="item thumbnail"></div>
<div class="item medium"></div>
<div class="item"></div>
<div class="item large"></div>
<div class="item"></div>
<div class="item medium"></div>
</div>

<script src='http://masonry.desandro.com/masonry.pkgd.min.js'></script>
</body>
</html>

3. Na koniec dodaj w sekcji </head> skrypt, który uruchomi cegiełkowy układ:
<script>
var container = document.querySelector('#masonry');
var masonry = new Masonry(container, {
columnWidth: 50,
itemSelector: '.item'
});
</script>

Tak wygląda cały przykładowy kod:
<html>
<head>
<title>Masonry Layout with Masonry Plugin</title>
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.item {
width: 50px;
height: 50px;
float: left;
background: #2296DD;
border: 2px solid #333;
}

.item.thumbnail {
width: 100px;
height: 100px;
background: #cfcfcf
}

.item.medium {
width: 150px;
height: 50px;
background: #A6E392
}

.item.large {
width: 200px;
height: 100px;
background: #D092E3
}
</style>

<script>
var container = document.querySelector('#masonry');
var masonry = new Masonry(container, {
columnWidth: 50,
itemSelector: '.item'
});
</script>

</head>
<body>
<div id='masonry'>
<div class="item"></div>
<div class="item"></div>
<div class="item thumbnail"></div>
<div class="item medium"></div>
<div class="item"></div>
<div class="item large"></div>
<div class="item"></div>
<div class="item medium"></div>
</div>

<script src='http://masonry.desandro.com/masonry.pkgd.min.js'></script>
</body>
</html>

Poniżej widnieje przykładowy layout z większą ilością elementów:

Oczywiście powyższy kod jest jedynie szkieletem strony. Między znaczniki div należy jeszcze umieścić elementy, np. obrazy czy tekst.
Cegiełkowy układ można też zbudować bez użycia biblioteki jQuery. Poniżej zobaczysz demo oraz kod:

Brak komentarzy :

Prześlij komentarz

Komentarze zawierające SPAM zostaną usunięte.

Szablon stworzony z przez Blokotka. Wszelkie prawa zastrzeżone.