Динамическое выравнивание контейнера с 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.