jQuery quicksend問題の位置計算

Question

jquery quicksendプラグインをギャラリー写真とカテゴリリストを含むページに実装しようとしていますが、フィルタリングの際に位置計算に問題があります。親指が左に移動し、最後に親指が正しい位置に戻ります。

demo pageが表示されますので、問題を理解することができます。 （私は遅いアニメーションを残しているので、あなたはよりよくチェックできます）。

私はCSSでいくつかの私の間違いがあると思いますが、私は本当に何を理解していない！

ここでJSコード：

// gallery 
if (jQuery().quicksand) { 

    (function($) { 

     $.fn.sorted = function(customOptions) { 
      var options = { 
       reversed: false, 
       by: function(a) { 
        return a.text(); 
       } 
      }; 

      $.extend(options, customOptions); 

      $data = jQuery(this); 
      arr = $data.get(); 
      arr.sort(function(a, b) { 

       var valA = options.by($(a)); 
       var valB = options.by($(b)); 

       if (options.reversed) { 
        return (valA < valB) ? 1 : (valA > valB) ? -1 : 0;    
       } else {   
        return (valA < valB) ? -1 : (valA > valB) ? 1 : 0; 
       } 

      }); 

      return $(arr); 

     }; 

    })(jQuery); 

    jQuery(function($) { 

     var read_button = function(class_names) { 

      var r = { 
       selected: false, 
       type: 0 
      }; 

      for (var i=0; i < class_names.length; i++) { 

       if (class_names[i].indexOf('selected-') == 0) { 
        r.selected = true; 
       } 

       if (class_names[i].indexOf('segment-') == 0) { 
        r.segment = class_names[i].split('-')[1]; 
       } 
      }; 

      return r; 

     }; 

     var determine_sort = function($buttons) { 
      var $selected = $buttons.parent().filter('[class*="selected-"]'); 
      return $selected.find('a').attr('data-value'); 
     }; 

     var determine_kind = function($buttons) { 
      var $selected = $buttons.parent().filter('[class*="selected-"]'); 
      return $selected.find('a').attr('data-value'); 
     }; 

     var $preferences = { 
      duration: 2000, 
      adjustHeight: 'auto' 
     } 

     var $list = jQuery('#portfolio-gallery'); 
     var $data = $list.clone(); 

     var $controls = jQuery('.gallery-categories'); 

     $controls.each(function(i) { 

      var $control = jQuery(this); 
      var $buttons = $control.find('a'); 

      $buttons.bind('click', function(e) { 

       var $button = jQuery(this); 
       var $button_container = $button.parent(); 
       var button_properties = read_button($button_container.attr('class').split(' '));  
       var selected = button_properties.selected; 
       var button_segment = button_properties.segment; 

       if (!selected) { 

        $buttons.parent().removeClass(); 
        $button_container.addClass('selected-' + button_segment); 

        var sorting_type = determine_sort($controls.eq(1).find('a')); 
        var sorting_kind = determine_kind($controls.eq(0).find('a')); 

        if (sorting_kind == 'all') { 
         var $filtered_data = $data.find('li'); 
        } else { 
         var $filtered_data = $data.find('li.' + sorting_kind); 
        } 

        var $sorted_data = $filtered_data.sorted({ 
         by: function(v) { 
          return $(v).find('strong').text().toLowerCase(); 
         } 
        }); 

        $list.quicksand($sorted_data, $preferences, function() { 
          yiw_lightbox(); 
          Cufon.replace('#portfolio-gallery h6'); 
        }); 

       } 

       e.preventDefault(); 

      }); 

     }); 

    }); 

} 

そして、ここではギャラリーのCSS：

.gallery-wrap { position:relative; width:675px; float:left; } 
#portfolio-gallery { list-style:none; margin:0; width:710px; } 
#portfolio-gallery li { float:left; margin:0 35px 0 0; width:201px; height:315px; position:relative; overflow:hidden; } 
.layout-sidebar-no #portfolio-gallery li { margin:0 50px 0 0; } 
#portfolio-gallery li .post-thumb a { display:block; width:179px; height:179px; padding:10px; border:1px solid #b2b0b0; } 
#portfolio-gallery li .post-thumb img { border:0; padding:0; width:179px; height:179px; } 
#portfolio-gallery li .post-thumb .shadow-thumb { width:199px; height:27px; background:url('images/bg/shadow-gallery.png') bottom center no-repeat; } 
#portfolio-gallery li h6 { font-style:italic; } 
#portfolio-gallery li p { color:#656262; font-size:90%; } 
#portfolio-gallery li h6, #portfolio-gallery li p { margin:0; } 
#content .gallery .gallery-caption {color: #888;font-size: 12px;margin: 0 0 12px;} 

ありがとうございました。

Answer 1

IDの代わりに＃portfolio-galleryとそのリスト項目をスタイリングしようとしましたか？

Quicksand docs。 「CSSの推奨事項」までスクロールします。

の代わりに：

.gallery-wrap li { float:left; margin:0 35px 0 0; width:201px; height:315px; position:relative; overflow:hidden; } 

Working demo：

#portfolio-gallery li { float:left; margin:0 35px 0 0; width:201px; height:315px; position:relative; overflow:hidden; } 

のようなものを試してみてください。