Решеточная верстка – это, возможно, самый удобный способ сделать веб-страницу похожей на страничку журнала. В данной статье будет показано, как с помощью CSS и Javascript создать подвижную решеточную верстку. Использованный алгоритм является очень простым и понятным. Существует множество современных способов оформления «под журнал», но нашей целью является понимание того, как создается такая верстка.
ШАГ 1. Подготовка html документа.
Сначала нужно создать базовую HTML структуру. Пример:
<html> <head> <title>Fluid grid</title> <script type="text/javascript" src="script/jquery-1.3.2.min.js"></script> </head> <body> <div class="box"><p><span>01</span>This is box number 1...</p></div> <div class="box alt"><p><span>02</span>This is box number 2...</p></div> <div class="box"><p><span>03</span>This is box number 3...</p></div> <div class="box alt"><p><span>04</span>This is box number 4...</p></div> <div class="box"><p><span>05</span>This is box number 5...</p></div> <div class="box alt"><p><span>06</span>This is box number 6...</p></div> <div class="box"><p><span>07</span>This is box number 7...</p></div> <div class="box alt"><p><span>08</span>This is box number 8...</p></div> <div class="box"><p><span>09</span>This is box number 9...</p></div> </body> </html>
Div’ы могут быть всем: статьей, постом и т.д.
Чтобы лучше понять пример, рекомендуется заменить текст из примера ‘This is box number…’ на то, что вам нужно (рисунки, текст и т.д.). На картинках показывается результат выполнения кода со случайно сгенерированным в блоках текстом.
ШАГ 2: Создание небольшой HTML конструкции.
Каждый шаг будет объяснен и проиллюстрирован картинками, ширина которых меньше 600px.
<link rel="stylesheet" type="text/css" href="style/reset.css" />
body {
position: relative;
width: 100%;
}
.box {
background-color: #F0F0F0;
color: #888;
font-family: Arial, Tahoma, serif;
font-size: 13px;
}
.box p {
padding: 10px;
}
.box span {
float: left;
font-size: 26px;
font-weight: bold;
}
div.alt {
background-color: #CCC;
}
ШАГ 3: JavaScript
Атрибуты
Ради улучшения эргономичности создадим собственное пространство имен «myFluidGrid» для избежания конфликтов с другими скриптами/библиотеками, использующими те же названия переменных.
var myFluidGrid = {
COLNUMBER : 2, // Minimum column number.
COLMARGIN : 10, // Margin (in pixel) between columns/boxes.
COLWIDTH : 240 // Fixed width of all columns.
};
3.2. Практическая реализация.
doLayout : function() {
var self = this;
var pointer = 0;
var arr = [];
var columns = Math.max(this.COLNUMBER, parseInt($('body').innerWidth() / (this.COLWIDTH + this.COLMARGIN)));
$('.box').css('position', 'absolute').css('width', this.COLWIDTH + 'px');
$('.box').each(function() {
var tempLeft = (pointer * (self.COLWIDTH + self.COLMARGIN));
$(this).css('left', tempLeft + 'px');
var tempTop = 0;
if (arr[pointer]) { tempTop = arr[pointer]; }
$(this).css('top', tempTop + 'px');
arr[pointer] = tempTop + $(this).outerHeight() + self.COLMARGIN;
pointer++;
if (pointer === columns) { pointer = 0; }
});
}
Здесь мы производим итерации, беря каждый блок (box) и устанавливаем его ширину с помощью COLWIDTH.
Внутри цикла мы определяем новые позиции left и top для каждого блока. Определение позиции left производиться с помощью переменной-указателя. Переменная-указатель задает позицию текущего столбца: умножаем её на ширину блока и добавляем отступ. Не забывайте увеличивать данную переменную в новом шаге и обнулять её, когда она достигает значения, которое равно максимальному числу столбцов.
Задание позиции top для блока осуществляется с помощью переменной arr. В ней хранится значение позиции bottom блока, который был последним добавлен в столбец. Пусть блок 1 имеет высоту 80px, left=0, top=0. В этом случае arr[0] примет значение 80 + отступ. Это проиллюстрировано на рисунке:
Получаем: arr[0]= 80 + отступ, arr[1]= 69 +отступ, arr[2]= 81+отступ. Четвертый блок будет использовать arr[0] и так далее.
Используем функцию «doLayout» и зададим ее свойства на события загрузки и изменения размеров окна:
$(window).ready(function() {
myFluidGrid.doLayout();
}).resize(function() {
myFluidGrid.doLayout();
});
ШАГ 4: Собираем все вместе.
<html>
<head>
<title>Fluid grid</title>
<link rel="stylesheet" type="text/css" href="style/reset.css" />
<style type="text/css">
body {
position: relative;
width: 100%;
}
.box {
background-color: #F0F0F0;
color: #888;
font-family: Arial, Tahoma, serif;
font-size: 13px;
}
.box p {
padding: 10px;
}
.box span {
float: left;
font-size: 26px;
font-weight: bold;
}
div.alt {
background-color: #CCC;
}
</style>
<script type="text/javascript" src="script/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
var myFluidGrid = {
COLNUMBER : 2, // Minimum column number.
COLMARGIN : 10, // Margin (in pixel) between columns/boxes.
COLWIDTH : 240, // Fixed width of all columns.
doLayout : function() {
var self = this;
var pointer = 0;
var arr = [];
var columns = Math.max(this.COLNUMBER, parseInt($('body').innerWidth() / (this.COLWIDTH + this.COLMARGIN)));
$('.box').css('position', 'absolute').css('width', this.COLWIDTH + 'px');
$('.box').each(function() {
var tempLeft = (pointer * (self.COLWIDTH + self.COLMARGIN));
$(this).css('left', tempLeft + 'px');
var tempTop = 0;
if (arr[pointer]) { tempTop = arr[pointer]; }
$(this).css('top', tempTop + 'px');
arr[pointer] = tempTop + $(this).outerHeight() + self.COLMARGIN;
pointer++;
if (pointer === columns) { pointer = 0; }
});
}
};
$(window).ready(function() {
myFluidGrid.doLayout();
}).resize(function() {
myFluidGrid.doLayout();
});
</script>
</head>
<body>
<div class="box"><p><span>01</span>This is box number 1...</p></div>
<div class="box alt"><p><span>02</span>This is box number 2...</p></div>
<div class="box"><p><span>03</span>This is box number 3...</p></div>
<div class="box alt"><p><span>04</span>This is box number 4...</p></div>
<div class="box"><p><span>05</span>This is box number 5...</p></div>
<div class="box alt"><p><span>06</span>This is box number 6...</p></div>
<div class="box"><p><span>07</span>This is box number 7...</p></div>
<div class="box alt"><p><span>08</span>This is box number 8...</p></div>
<div class="box"><p><span>09</span>This is box number 9...</p></div>
</body>
</html>