Умные динамические колонки с применением CSS и jQuery
Вольный перевод статьи Smart Columns with CSS & jQuery.
Существует два типа колонок, используемых на веб-сайтах: фиксированной ширины и тянущиеся в ширину в зависимости от размера экрана (их еще называют “резиновыми”).
Недостатком фиксированных колонок при их использовании в “резиновом” блоке является то, что может появляться лишнее незаполненное пространство (при определенной ширине блока), поскольку его ширина меньше ширины столбца:
“Резиновые” же колонки не оставляют избыточных пустого пространства и прекрасно вписываются в родительский блок. Однако их недостаток заключается в том, что в строку мы можем поместить только фиксированное число столбцов:
Решение
Суть решения заключается в том, чтобы взять преимущества обоих ситуаций и объединить их в одно. Что мы должны получить в итоге:
- Блок должен вмещать столько фиксированных колонок, сколько позволяет размер экрана.
- Если в блоке образовалось лишнее свободное пространство, равномерно распределить его на каждую из колонок, чтобы заполнилось все свободное пространство в блоке.
- При растяжении колонок ориентироваться на их базовую ширину и растягивать их до той поры, пока потенциальное свободное пространство не вместит очередную колонку.
Посмотреть пример - Умные динамические колонки.
HTML
Начнем с создания неупорядоченного списка, пункты которого будут вести себя как колонки.
1 2 3 4 5 6 7 8 9 | <ul class="column"> <!-- повторяющийся элемент списка --> <li> <div class="block"> <!-- контент --> </div> </li> <!-- конец повторяющегося элемента --> </ul> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | ul.column{ width: 100%; padding: 0; margin: 10px 0; list-style: none; } ul.column li { float: left; width: 200px; /* ширина колонки по умолчанию */ padding: 0; margin: 5px 0; display: inline; } .block { height: 355px; font-size: 1em; margin-right: 10px; /* отступ между колонками */ padding: 20px; background: #e3e1d5; } .block h2 { font-size: 1.8em; } .block img { /* параметры для изображений с меняющимися размерами и бордюром */ width: 89%; /* убираем 1% от ширины, чтобы предотвратить баг в IE6 */ padding: 5%; background:#fff; margin: 0 auto; display: block; -ms-interpolation-mode: bicubic; /* предотвращение пикселизации изображений в IE 6/7 */ } |
jQuery
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | function smartColumns() { //функция, подсчитывающая ширину колонок //сброс ширины строки до 100% после изменения размера экрана $("ul.column").css({ 'width' : "100%"}); var colWrap = $("ul.column").width(); //определяем ширину строки var colNum = Math.floor(colWrap / 200); //определяем, сколько столбцов в 200px вместится в строку и округляем число до целого var colFixed = Math.floor(colWrap / colNum); //ширину строки делим на количество столбцов, округляем до целого числа, в результате получаем точную скорректированную ширину колонки $("ul.column").css({ 'width' : colWrap}); //ставим точную ширину строки в пикселях вместо использования % - это предотвратит возможные баги в разных браузерах при различных разрешениях экрана $("ul.column li").css({ 'width' : colFixed}); //ставим точную ширину измененным столбцам } smartColumns(); //запускаем функцию после загрузки страницы $(window).resize(function () { //запускаем функцию после каждого изменения размера экрана smartColumns(); }); |
Ссылки по теме
- Оригинал статьи на английском
- “Адаптивные блоки” от akella (там же ряд других примеров подобной техники)
P.S. Довольно интересная штука. При удобном случае нужно будет обязательно воспользоваться.
Видимо, сохраняете в неправильной кодировке.
Подскажите пожалуйста в какую кодировку написать и где, наверно В CSS. Очень надо
Во-первых, кодировка указывается в текстовом редакторе, в котором сохраняется файл.
Во-вторых, она указывается в HTML-коде в теге <meta>, например:
Здесь utf-8 - это название кодировки. Она должно быть одинаковой в обоих случаях. Можно также использовать кодировку windows-1252.
Спасибо Dimox, буду пробовать)
не получается( Dimox скажи пожалуйста как в кодировке демо сайта сделать так чтобы читался русский шрифт. Я поменял то, что ты говорил и в настройках блокнота по умолчанию задал данную кодировку (UTF-8), но ничего не помагает((
Замени iso-8859-1 на utf-8 и сохрани файл в utf-8.
Сработало!Большое спасибо Dimox. Очень помог частенько буду посещать этот сайт!
Подскажите куда вставлять jQuery Сайт будет под Joomla Спасибо!
Посмотрите, как сделано в примере, и сделайте по аналогии.
Каким образом в блоки картинки вставить? Спасибо!
как можно распределить свободное пространство между блоками!? Спасибо!
Вопрос непонятен.
у вас свободное пространство распределяется в блоки тем самым они растягиваються одинаково и заполняют всю страницу по ширене с фиксированными отступами между блоками.
А как сделать так чтобы свободное пространство распределялось между блоками а сами блоки оставались с теми же размерами?
Сходу я могу лишь сказать, что самое просто - сделать это таблицей. Вот пример:
2
3
4
5
6
7
8
9
<tr>
<td style="width: 150px">123</td>
<td></td>
<td style="width: 150px">456</td>
<td></td>
<td style="width: 150px">789</td>
</tr>
</table>
а как сделать если сделано не в таблице каждый блок прописан в div для резиновой странички? Спасибо!
Не знаю.