0

我在我的网站上使用 jQuery 流沙插件，但目前它下面的页脚会跳起来，并且在更改过滤器选项时不会随着流沙图像平滑地向上缓和。

我该如何解决这个问题？

代码：

<div class="filterContainer">

            <span class="filter">Designer Filter:</span>

            <ul id="filterOptions">
                <li class="active"><a href="#" class="all">All</a></li>
                <li><a href="#" class="bisque">Bisque</a></li>
                <li><a href="#" class="radart">RadArt</a></li>
                <li><a href="#" class="vogue">Vogue</a></li>
                <li><a href="#" class="zehnder">Zehnder</a></li>
            </ul>

        </div>

        <!-- Radiator Showcase Image -->
        <ul class="imageHolder">
            <li class="item" data-id="id-1" data-type="radart">
                <img src="<?php echo base_url(); ?>images/radart/city-lights.jpg" alt="Radart Tripple City Lights Radiator" />
            </li>
            <li class="item" data-id="id-2" data-type="bisque">
                <img src="<?php echo base_url(); ?>images/bisque/seta.jpg" alt="Bisque Seta Radiator"/>
            </li>
            <li class="item" data-id="id-3" data-type="zehnder">
                <img src="<?php echo base_url(); ?>images/zehnder/zehnder-bay-2.png" alt="Zehnder Bay Radiator" />
            </li>
            <li class="item" data-id="id-4" data-type="zehnder">
                <img src="<?php echo base_url(); ?>images/zehnder/fassane-mirror.jpg" alt="Zehnder Fassane Mirror Radiator"/>
            </li>
            <li class="item" data-id="id-5" data-type="vogue">
                <img src="<?php echo base_url(); ?>images/vogue/1.jpg" alt="Vogue Radiator"/>
            </li>
            <li class="item" data-id="id-6" data-type="bisque">
                <img src="<?php echo base_url(); ?>images/bisque/b2.jpg" alt="Bisque b2 Radiator" />
            </li>
            <li class="item" data-id="id-7" data-type="bisque">
                <img src="<?php echo base_url(); ?>images/bisque/chime.jpg" alt="Bisque Chime Radiator" />
            </li>
            <li class="item" data-id="id-8" data-type="bisque">
                <img src="<?php echo base_url(); ?>images/bisque/orbit.jpg" alt="Bisque Orbit Radiator" />
            </li>
            <li class="item" data-id="id-9" data-type="zehnder">
                <img src="<?php echo base_url(); ?>images/zehnder/fassane.jpg" alt="Zehnder Fassane Radiator"/>
            </li>
            <li class="item" data-id="id-10" data-type="bisque">
                <img src="<?php echo base_url(); ?>images/bisque/svelte.jpg" alt="Bisque Svelte Radiator"/>
            </li>
        </ul>   

    </div>

    <div class="clear"></div>

    <!-- Footer -->
    <div class="footer">

        <div class="brands">
            <img src="<?php echo base_url(); ?>images/logos/full.png" />
        </div>
     </div>

jQuery

$(document).ready(function() {
    // get the action filter option item on page load
    var $filterType = $('#filterOptions li.active a').attr('class');

    // get and assign the ourHolder element to the
    // $holder varible for use later
    var $holder = $('ul.imageHolder');

    // clone all items within the pre-assigned $holder element
    var $data = $holder.clone();

    // attempt to call Quicksand when a filter option
    // item is clicked
    $('#filterOptions li a').click(function(e) {
        // reset the active class on all the buttons
        $('#filterOptions li').removeClass('active');

        // assign the class of the clicked filter option
        // element to our $filterType variable
        var $filterType = $(this).attr('class');
        $(this).parent().addClass('active');
        if ($filterType == 'all') 
        {
            // assign all li items to the $filteredData var when
            // the 'All' filter option is clicked
            var $filteredData = $data.find('li');
        }
        else 
        {
            // find all li elements that have our required $filterType
            // values for the data-type element
            var $filteredData = $data.find('li[data-type=' + $filterType + ']');
        }

        // call quicksand and assign transition parameters
        $holder.quicksand($filteredData, {
            duration: 800,
            easing: 'easeInOutQuad'
        });

        $

        $('.ul.imageHolder').slideDown('slow', function() {

        });

        return false;
    });
});
4

1 回答 1

3

参数“adjustHeight”默认为“auto”。如果您将“adjustHeight”指定为“动态”，事情应该会更顺畅。

而不是这个：

 
$holder.quicksand($filteredData, {
            持续时间：800，
            缓动：'easeInOutQuad'
        });

它会是这样的：

$holder.quicksand($filteredData, {
            adjustHeight: 'dynamic', // 这是您要查找的行。
            持续时间：800，
            缓动：'easeInOutQuad'
        });

最好的。

于 2012-07-31T19:24:07.000 回答