2

我正在尝试实现 jquery quicksend 插件，到带有画廊照片和类别列表的页面来过滤它们，但是位置计算存在问题，因为在过滤期间，所有拇指都向左移动，最后，拇指回到正确的位置。

你可以看到演示页面，这样你就可以理解问题了。（我留下了慢动画，所以你可以检查得更好）。

我认为我的 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;}

谢谢你。

4

1 回答 1

4

您是否尝试过使用类而不是 ID 来设置您的#portfolio-gallery 及其列表项的样式？

流沙文档。向下滚动到“CSS 建议”。

代替：

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

尝试类似：

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

工作演示。

于 2011-07-09T14:30:20.123 回答