Анимарованная сортировка блоков с помощью Isotope

jQuery 24.12.2015

На многих сайтах, особенно на сайтах портфолио, можно встретить сортировку блоков с каким-либо содержимым или обыкновенных картинок выполненную с красивой анимацией. На сегодняшний день есть большое количество jQuery плагинов с помощью которым можно без труда сделать такую сортировку. С помощью одного из них, а именно с помощью плагина isotope, мы и будем создавать свою сортировку блоков. Лично я использовал данный скрипт при создании своего портфолио и при создании каталога продукции на сайте автозапчастей - mzm-market.ru/home/katalog-produkcii

ДЕМО

ИСХОДНИКИ

Подключаем скрипты

Если у Вас уже была подключена сама библиотека jQuery, то подключаем только плагин isotope.

<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.isotope.min.js"></script>

HTML

В первую очередь ссылки, по клику на которые будет происходить фильтр блоков. У каждой ссылки есть атрибут data-filter, в котором содержится класс блоков, которые останутся, если нажать на эту ссылку.

<ul id="filter" class="clearfix">
    <li><a href="" class="current btn" data-filter="*">Все</a></li>
    <li><a href="" class="btn" data-filter=".portfolio">Портфолио</a></li>
    <li><a href="" class="btn" data-filter=".cutaway">Визитки</a></li>
    <li><a href="" class="btn" data-filter=".corporative">Корпоративные</a></li>
</ul>

Затем сами блоки, которые будут сортироваться. Каждый блок имеет класс work и один из классов, который есть в атрибуте ссылки data-filter.

<div class="works clearfix">
    <article class="work portfolio">
        <div>
            <img src="images/portfolio/1.jpg" width="300" height="220" />
            <h3>Lorem ipsum dolor sit amet</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </article>
    <article class="work cutaway">
        <div>
            <img src="images/cutaway/1.jpg" width="300" height="225" />
            <h3>Lorem ipsum dolor sit amet</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </article>
    <article class="work corporative">
        <div>
            <img src="images/corporative/1.jpg" width="300" height="260" />
            <h3>Lorem ipsum dolor sit amet</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </article>
    ...
</div>

CSS

Для улучшения анимации.

/**** 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:         top, left, 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;
}
/* End: Recommended Isotope styles */
/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
  -webkit-transition: none;
     -moz-transition: none;
      -ms-transition: none;
       -o-transition: none;
          transition: none;
}

Также немного приукрасим ссылки и блоки с контентом.

#works,
.works {
    width: 1000px;
    margin: 30px auto;
}
#filter li {
    display: block;
    float: left;
    list-style: none;
    margin-left: 9px;
}
#filter li a {
    background: #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    padding: 10px 15px;
    display: block;
    color: #666;
    transition: all 0.4s ease;
}
#filter li a:hover,
#filter li a.current {
    background: #666;
    color: #fff;
}
.work {
    width: 300px;
    float: left;
    margin: 0 9px 10px;
    border: 7px solid #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}
.work div {
    position: relative;
}
.work div h3 {
    background: rgba(0,0,0, .7);
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 7px 0;
    text-align: center;
    font-size: 18px;
    color: #fff;
}
.work div p {
    background: rgba(0,0,0, .7);
    font-size: 14px;
    color: #eee;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    padding: 7px 0;
}

javascript

$(document).ready(function() {
 
        $('.works').isotope({
            itemSelector: '.work'
        });
 
        $('#filter a').click(function(){
 
            $('#filter a').removeClass('current');
            $(this).addClass('current');
            var selector = $(this).attr('data-filter');
 
            $('.works').isotope({
                filter: selector,
                animationOptions: {
                    duration: 1000,
                    easing: 'easeOutQuart',
                    queue: false
                }
            });
            return false;
 
        });
 
});