是否可以通过同位素分类列对事物进行排序?

时间:2014-12-20 12:33:32

标签: javascript jquery jquery-isotope

我想以类似以下的格式对事物进行排序......

-----------------------
| cat1 | dog1 | bird1 |
-----------------------
| cat2 | dog2 | bird2 |
-----------------------
| cat3 | dog3 | 
---------------
       | dog4 |
       --------

可以这样排序吗?

我理解可以进行类似于此的线性列排序:

----------------------
| cat1 | cat4 | cat7 |
----------------------
| cat2 | cat5 | cat8 |
----------------------
| cat3 | cat6 | 
---------------

但我需要按类别排序。是否可以在同位素中进行此操作,如果可以,您可以提供一个示例吗?

也可以像这样同时以两种(或更多种)不同方式排序吗?

(请注意,猫是水平分拣时垂直分拣的。)

----------------------
| cat1 | cat4 | cat7 |
----------------------
| cat2 | cat5 | cat8 |
----------------------
| cat3 | cat6 | 
----------------------
| dog1 | dog2 | dog3 |
----------------------
| dog4 | dog5 | dog6 |
----------------------
| dog7 |
--------

2 个答案:

答案 0 :(得分:1)

不幸的是,Isotop并没有按当前版本(v2.1.0)来支持您的请求,但您可以在类别中添加Null元素(如高度和宽度的空div),并根据您的需要显示/隐藏它们显示此订单的示例

-----------------------
| cat1 | dog1 | bird1 |
-----------------------
| cat2 | dog2 | bird2 |
-----------------------
| cat3 | dog3 | 
---------------
       | dog4 |
       --------

您可以添加一个null元素并在最后一行显示如下,并为其布局选择cellsByColumn。空元素在内容和风格上没有任何内容。它们只按高度/宽度填充空间。

-----------------------
| cat1 | dog1 | bird1 |
-----------------------
| cat2 | dog2 | bird2 |
-----------------------
| cat3 | dog3 | 
---------------
| Null | dog4 |
---------------

为了实现另一种结构,你可以在第三列的位置添加另一个Null元素并选择正常的布局。

----------------------
| cat1 | cat4 | cat7 |
----------------------
| cat2 | cat5 | cat8 |
----------------------
| cat3 | cat6 | Null |
----------------------
| dog1 | dog2 | dog3 |
----------------------
| dog4 | dog5 | dog6 |
----------------------
| dog7 |
--------

查看我的sample1sample2代码。

答案 1 :(得分:1)

对于这种类似的要求

我用过这个

function sortBy(tag) {


    $('.isotope-item').each(function(index, value) 
    {
        var arrayOfCategories = $(this).attr('data-category').split(" ");

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

          if((tag.indexOf(arrayOfCategories[i]) !== -1)) {
            //console.log('match');
            $(this).attr('data-sort-order', 1);
            break;
          } else {
            //console.log('no match');
            $(this).attr('data-sort-order', 2);
          }    
        }

    });

    $container.isotope( 'updateSortData', $('.isotope-item'));
    //$container.isotope( 'reLayout' );
    $container.isotope({ sortBy : 'sortOrder' });    
  }

我正在设置&#34;数据排序&#34;某些类别项的属性,通过&#34;数据排序顺序&#34;函数的值将对具有此属性的元素进行排序。