Динамическое выравнивание контейнера с float-left блоками по центру с помощью JS+CSS
В предыдущей статье мы рассмотрели, как сделать дизайн страницы WordPress в форме "карточек" с помощью JQuery Masonry. Если у вас блоки-карточки одинаковой ширины, то layout визуально будет размещаться в виде колонок.
При этом, ввиду особенностей атрибута стиля float:left, все колонки будут прижаты к левому краю окна, а контейнер будет иметь ширину 100%.
Рассмотрим, как выровнять набор колонок по центру не зависимо от ширины экрана. Предусмотрим также динамическое перестроение при изменении размера окна.
В файле стилей зададим контейнеру и блокам следующие стили:
#postcontainer { margin: 0px auto; width: 100%; } #postcontainer .post { background: #FFFFFF; float: left; margin: 20px 7px 0px; vertical-align: top; width: 300px; } |
Подключаем скрипты jquery и плагин masonry в заголовке страницы.
<script type="text/javascript" src="/js/jquery.min.js"/> <script type="text/javascript" src="/js/masonry.pkgd.min.js"/> |
Нижеприведенный код выполняет "укладку" блоков в стиле карточек с помощью Masonry и в функции stylesheetToggle() динамически пересчитывает ширину контейнера в зависимости от того, сколько колонок помещается в окно.
$(document).ready(function(){ stylesheetToggle(); //первый вызов при загрузке страницы $(window).resize(stylesheetToggle); //вызов при каждом изменении окна браузера $('#postcontainer').masonry({ //опции динамического layout itemSelector: '.post', singleMode: true, isResizable: true, isAnimated: true, animationOptions: { queue: false, duration: 500 } }); }); //функция пересчета ширины контейнера function stylesheetToggle(){ //количество блоков на странице var count = $(".post").length; //количество блоков шириной 320px (с отступами), которые помещаются в текущее окно var columns = $('body').width() / 320 | 0; //если блоков меньше, чем помещается в экран, вычисляем из расчета "сколько есть" if (count<columns) columns=count; //суммарная ширина блоков, которые надо вместить в экран var colwidth = columns*320; //ограничитель ширины контейнера, если не нужно растягивать на весь экран if (colwidth<1280){ //ширина контейнера подгоняется под количество колонок $('#postcontainer').width(columns*320); } else{ $('#postcontainer').width("1280px"); } } |
Приведенная функция рассчитает ширину контейнера согласно числу колонок при первоначальной загрузке страницы. Затем, если размер окна изменится, она определит число колонок, вмещающихся в экран по ширине, и пересчитает ширину контейнера.
Благодаря комбинации заданной ширины и свойства margin: 0px auto, контейнер с блоками выравняется по ширине окна, а внутренние блоки будут равномерно в нем распределены.
В примере ширина контейнера ограничена 1280px.
