Question

我使用同位素按名称或类别过滤和排序元素，在主容器中降序或升序。

我需要保持第一个元素静态，以便它不受排序/过滤的影响。我已经设法得到这个但是为第一个元素工作，但是，当添加一个特定的过滤器时，第一个元素被隐藏，所以我需要第二个元素（它将显示为第一个）变为静态所以我总是有左上角可见的静态元素。

以下代码适用于第一个元素。我已经尝试修改下面的代码以合并第二个元素，以便在应用排序时保持静态，但我正在努力。有人可以帮忙吗？

            var $container = $('#container'),
                 filters = {};
                 $container.isotope({
                itemSelector: '.element',
                masonry: {
                    columnWidth: 260
                },
                getSortData: {
                    category: function($elem) {
                        if ($elem.is('.first_static')) {
                            return -1;
                        }
                        return $elem.attr('data-category');
                    },
                    date: function($elem) {
                        if ($elem.is('.first_static')) {
                            return -1;
                        }
                        return $elem.attr('data-expiry');
                    },
                    name: function($elem) {
                        if ($elem.is('.first_static')) {
                            return -1;
                        }
                        return $elem.find('.name').text();
                    },
                    first: function($elem) {
                        // sort by first_static first, then by original order
                        return ($elem.hasClass('first_static') ? -500 : 0) + $elem.index();
                    }
                },
                sortBy: 'first'
            });

我正在使用JSFiddle（http://jsfiddle.net/AbUgj/24/）来演示我想要做什么

Answer 1

添加一个名为show_el的新类，然后尝试按照此代码。

.show_el:first {
    display: static;
}

Answer 2

假设您有一个所有可见元素的类，我们称之为visible-element。然后，您可以定义此css规则：

.visible-element:first {
    display: static;
}

您必须确保所有可见元素都具有visible-element类，但不会有任何不可见元素具有visible-element类。

同位素问题 - 在排序/过滤后始终将元素保留在左上角

2 个答案: