jQuery流沙

我正在我的网站上使用jQuery流沙插件,但目前它下方的页脚,在更改filter选项时跳起并且不能顺畅地向上移动以及流沙图像。

我该怎么办呢?

码:

Designer Filter:
  • <img src="https://stackoverflow.com/questions/11435870/jquery-quicksand/images/radart/city-lights.jpg" alt="Radart Tripple City Lights Radiator" />
  • <img src="https://stackoverflow.com/questions/11435870/jquery-quicksand/images/bisque/seta.jpg" alt="Bisque Seta Radiator"/>
  • <img src="https://stackoverflow.com/questions/11435870/jquery-quicksand/images/zehnder/zehnder-bay-2.png" alt="Zehnder Bay Radiator" />
  • <img src="https://stackoverflow.com/questions/11435870/jquery-quicksand/images/zehnder/fassane-mirror.jpg" alt="Zehnder Fassane Mirror Radiator"/>
  • <img src="https://stackoverflow.com/questions/11435870/jquery-quicksand/images/vogue/1.jpg" alt="Vogue Radiator"/>
  • <img src="https://stackoverflow.com/questions/11435870/jquery-quicksand/images/bisque/b2.jpg" alt="Bisque b2 Radiator" />
  • <img src="https://stackoverflow.com/questions/11435870/jquery-quicksand/images/bisque/chime.jpg" alt="Bisque Chime Radiator" />
  • <img src="https://stackoverflow.com/questions/11435870/jquery-quicksand/images/bisque/orbit.jpg" alt="Bisque Orbit Radiator" />
  • <img src="https://stackoverflow.com/questions/11435870/jquery-quicksand/images/zehnder/fassane.jpg" alt="Zehnder Fassane Radiator"/>
  • <img src="https://stackoverflow.com/questions/11435870/jquery-quicksand/images/bisque/svelte.jpg" alt="Bisque Svelte Radiator"/>

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”默认为“auto”。 如果将“adjustHeight”指定为“动态”,则事情应该更顺畅。

而不是这个:

 
 $ holder.quicksand($ filteredData,{
            持续时间:800,
            缓和:'easeInOutQuad'
         });

它会是这样的:

 $ holder.quicksand($ filteredData,{
             adjustHeight:'dynamic',//这是你要找的线。
            持续时间:800,
            缓和:'easeInOutQuad'
         });


最好。