jQuery流沙 [英] jQuery Quicksand

问题描述

我在我的网站上使用jQuery流沙插件，但此刻它下面的页脚会跳动，并且在更改过滤器选项时不会随着流沙图像平滑地向上平滑.

I'm using the jQuery quicksand plugin on my site but at the moment the footer below it, jumps up and doesn't smoothly ease upwards along with the quicksand images when changing the filter option.

我该如何解决这个问题?

How can I go about fixing this?

代码:

<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;
    });
});

推荐答案

参数"adjustHeight"默认为自动".如果将"adjustHeight"指定为"dynamic"，则应该更平滑.

The parameter "adjustHeight" defaults to "auto". If you specify "adjustHeight" as 'dynamic', things should be smoother.

代替此:

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

是这样的:

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

最好.

这篇关于jQuery流沙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！