г. Владимир, пр. Ленина 15а, офис 410

8 (499) 404-14-01
(телефон офиса)

8 (904) 259-97-29
(ватсапп, вайбер, телеграмм)

пн-пт: с 09.00-18.00
e-mail: info@pavelsonar.net

Isotope — это прекрасное дополнение для адаптивной верстки. С помощью этого бесплатного jQuery плагина, можно при заставить блоки динамически перемещаться по странице, при изменении разрешения экрана (или размера страницы). Также можно добавить плавную CSS3 анимацию.

1. Сначала закачайте файл jquery.isotope.min.js на сайт.
Файл можно скачать c github .(https://raw.github.com/desandro/isotope/master/jquery.isotope.min.js)

2. Подключаем

<script type="text/javascript" src="http://[ваш сайт]/jquery.isotope.min.js"></script>
<script type="text/javascript"> 
  $(function(){ 
      var $container = $('#container'); 
      $container.isotope({ 
        itemSelector: '.item' 
      }); 
    }); 
</script>

3. Добавление блока #container.

Для работы плагина, должна быть примерно такая структура документа:

<div id="container" > 
	<article class="item"></article>
	<article class="item"></article>
	<article class="item"></article>
	<article class="item"></article>
		...
</div> <!-- #container --> 

 

Вставьте CSS код в style.css.

 

#container {
position:relative;
width:100%;
overflow:hidden;
}

.item {
position:relative;
float:left;
overflow: hidden;
position: relative;
width: 182px;
height:auto;
margin: 0 5px 10px 5px;

/* Дополнительные стили */
border-radius: 7px 7px 7px 7px;
box-shadow: 0 0 5px #BBB;
border: 1px solid #c3c3c3 !important;
padding: 0.5em 0.5em 0.5em;
}

/**** Isotope Filtering ****/

.isotope-item {
z-index: 2;
}

.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}

.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}

.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-ms-transition-property: -ms-transform, opacity;
-o-transition-property: -o-transform, opacity;
transition-property: transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-ms-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
}

 

В CSS у класса .item нужно будет заменить ширину width: 195px на вашу.

Например, если ширина контейнера 660px, и мы хотим чтобы поместились 3 блока в строке, тогда подбираем ширину примерно равную 210~220px (с учетом margin'ов). Если нужно 6 блоков в строке, тогда берем примерно 100~110px (с учетом margin'ов).

 

Чтобы сетка из блоков выглядела красиво, нужно указать правильное количество записей на странице.
Если по ширине будет 3 блока, тогда укажите число, кратное трем. Например 9, 12 и т.д.

Рекомендую отличный хостинг