Нижний колонтитул прыгает только на первом фильтрующем действии

Я реализовал портфолио quicksand на веб-сайте (над которым, к сожалению, я работаю в xampp, поэтому не могу показать вам пример), и мой sitefooter делает большой прыжок в область контента ТОЛЬКО при первом действии фильтрации.

Что я пробовал:

  • различные настройки для опции "AdjustHeight" плывуна
  • избегая правил CSS и JQuery на одном и том же селекторе
  • определение ширины и высоты как можно лучше
  • W3C проверка всей моей разметки, конечно

Вот что происходит:

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

Дополнительная информация: я не использую px или em для ширины, но%, потому что мне нужны столбцы и мне нужна страница, чтобы реагировать.

Почему нижний колонтитул прыгнул в первый раз, используя только фильтр? Есть идеи?

Части моей разметки HTML:

<div id="main-content">
    <ul id="quicksand-portfolio" class="filterable-grid">  

        <li data-id="id-1234" data-type="category-1">
            <span class="portfolio-thumbnail">
                <a href="#"><img src="image.jpg"></a>   
             </span>                                

             <div class="thumbnail-overlay">
                 <div class="infotext">
                     <p>blablabla</p>
                 </div>
              </div>
        </li>

    </ul>
 </div>

Правила CSS:

ul.filterable-grid li {
    float: left;
    width: 30.68%;
    height: 180px;
    overflow: hidden;
    margin-right: 3.97%;
    margin-bottom: 3.97%;
    position: relative;
}

ul.filterable-grid li:nth-child(3n) {
    margin-right: 0;
}

ul.filterable-grid li:nth-child(3n+1) {
    clear: left;
}

ul.filterable-grid li p {
    display:block;
}

.portfolio-thumbnail {
    width: 100%;
    height: 180px;
    overflow: hidden;
}

.portfolio-thumbnail img {
    max-width: 100%;
    height: auto;
}

И часть зыбучих песков:

// Quicksand Portfolio
function portfolio_quicksand() {
    var $filter;
    var $container;
    var $containerClone;
    var $filterLink;
    var $filteredItems

    $filter = $('.filter li.active a').attr('class');
    $filterLink = $('.filter li a');
    $container = $('ul#quicksand-portfolio');
    $containerClone = $container.clone();

            // Show Thumbnail Overlay on mouseover, hide on mouseout
    $('#main-content').on('mouseover', '#quicksand-portfolio li', function(){
        $(this).find('.thumbnail-overlay').stop().toggle('fast');
    });

    $('#main-content').on('mouseout', '#quicksand-portfolio li', function(){
        $(this).find('.thumbnail-overlay').stop().toggle('fast');    
    });

            // Filter Links
    $filterLink.click(function(e) 
    {
        $('.filter li').removeClass('active');
        $filter = $(this).attr('class').split(' ');
        $(this).parent().addClass('active');

        if ($filter == 'all') {
            $filteredItems = $containerClone.find('li'); 
        }
        else {
            $filteredItems = $containerClone.find('li[data-type~=' + $filter + ']'); 
        }

                    // Quicksand Transitions
        $container.quicksand($filteredItems, 
        {
            duration: 750,
            easing: 'easeInOutQuad',
            adjustHeight: 'auto',
        });
    });
}

if(jQuery().quicksand) {
    portfolio_quicksand();  
}
Источник

1 ответ

Вы можете попробовать настроить Height: 'false'. это работает нормально.

Источник
Другие вопросы по тегам