jQuery流沙

Question

我在網站上使用的是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;
    });
});

Answer 1

參數“ adjustHeight”默認為“自動”。 如果將“ adjustHeight”指定為“動態”，則情況應該更平滑。

代替這個：

$holder.quicksand($filteredData, {
            duration: 800,
            easing: 'easeInOutQuad'
        });

就像這樣：

$holder.quicksand($filteredData, {
            adjustHeight: 'dynamic', // This is the line you are looking for.
            duration: 800,
            easing: 'easeInOutQuad'
        });

最好。