Question

我在一个网站上实现了一个流沙组合（我不幸在xampp上工作，所以我无法向你展示一个例子），我的sitefooter只在第一次过滤动作时大幅跳转到内容区域。

我尝试了什么：

流沙的“adjustHeight”选项的各种设置
避免在同一个选择器上使用css规则和jquery
尽可能好地定义宽度和高度
当然我的整个标记的W3C验证

这就是：

load Portfolio页面
点击过滤器
底部的全宽度页脚向右跳到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();  
}

Answer 1

你可以试试adjustHeight：＆＃39; false＆＃39;。它工作正常。

页脚只跳过第一个过滤动作流沙组合

1 个答案: