Генератор форм

Для веб-мастера

AutoClicker - Автокликер для популярных тапалок в телеграм, который запускается на вашем ПК в браузере.
CheckTrust - сервис проверки качества сайтов. Экономия до 70% на аренде ссылок.
GoGetLinks - популярная система для получения качественных ссылок в обзорах с размещением навсегда.
Etxt.RU - биржа статей.
FastVPS - качественный VPS/VDS хостинг в германии.
Roistat - система сквозной бизнес-аналитики.

Умные динамические колонки с применением CSS и jQuery

Рейтинг:

Дата: 10 февраля 2010 Просмотры

12791

Существует два типа колонок, используемых на веб-сайтах: фиксированной ширины и тянущиеся в ширину в зависимости от размера экрана (их еще называют “резиновыми”).

Недостатком фиксированных колонок при их использовании в “резиновом” блоке является то, что может появляться лишнее незаполненное пространство (при определенной ширине блока), поскольку его ширина меньше ширины столбца:

“Резиновые” же колонки не оставляют избыточных пустого пространства и прекрасно вписываются в родительский блок. Однако их недостаток заключается в том, что в строку мы можем поместить только фиксированное число столбцов:

Решение

Суть решения заключается в том, чтобы взять преимущества обоих ситуаций и объединить их в одно. Что мы должны получить в итоге:

Блок должен вмещать столько фиксированных колонок, сколько позволяет размер экрана.
Если в блоке образовалось лишнее свободное пространство, равномерно распределить его на каждую из колонок, чтобы заполнилось все свободное пространство в блоке.
При растяжении колонок ориентироваться на их базовую ширину и растягивать их до той поры, пока потенциальное свободное пространство не вместит очередную колонку.

Посмотреть пример - Умные динамические колонки.

HTML

Начнем с создания неупорядоченного списка, пункты которого будут вести себя как колонки.

<ul class="column">

<!-- повторяющийся элемент списка -->
<li>
<div class="block">
<!-- контент -->
</div>
</li>
<!-- конец повторяющегося элемента -->

</ul>

CSS

  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%;
   padding: 5%;
   background:#fff;
   margin: 0 auto;
   display: block;
   -ms-interpolation-mode: bicubic; 
   }

jQuery

//функция, подсчитывающая ширину колонок function smartColumns() {
//сброс ширины строки до 100% после изменения размера экрана
$("ul.column").css({ 'width' : "100%"});
//определяем ширину строки
var colWrap = $("ul.column").width();
 //определяем, сколько столбцов в 200px вместится в
//строку и округляем число до целого
  var colNum = Math.floor(colWrap / 200); 
 // ширину строки делим на количество столбцов, округляем 
//до целого числа, в результате получаем точную 
//скорректированную ширину колонки
var colFixed = Math.floor(colWrap / colNum);

//ставим точную ширину строки в пикселях вместо использования % - это
//предотвратит возможные баги в разных браузерах при различных
//разрешениях экрана
 $("ul.column").css({ 'width' : colWrap});
 //ставим точную ширину измененным столбцам

$("ul.column li").css({ 'width' : colFixed}); 
}
//запускаем функцию после загрузки страницы smartColumns();
//запускаем функцию после каждого изменения размера экрана $(window).resize(function () {
   smartColumns();
 });