Javascript 有可能按同位素中的分类列对事物进行排序吗?

Javascript 有可能按同位素中的分类列对事物进行排序吗?,javascript,jquery,jquery-isotope,Javascript,Jquery,Jquery Isotope,我想用一种类似于下面的格式对事物进行排序 ----------------------- | cat1 | dog1 | bird1 | ----------------------- | cat2 | dog2 | bird2 | ----------------------- | cat3 | dog3 | --------------- | dog4 | -------- 可以这样分类吗 我知道可以进行类似于以下内容的线性列排序: -------------

我想用一种类似于下面的格式对事物进行排序

-----------------------
| cat1 | dog1 | bird1 |
-----------------------
| cat2 | dog2 | bird2 |
-----------------------
| cat3 | dog3 | 
---------------
       | dog4 |
       --------
可以这样分类吗

我知道可以进行类似于以下内容的线性列排序:

----------------------
| cat1 | cat4 | cat7 |
----------------------
| cat2 | cat5 | cat8 |
----------------------
| cat3 | cat6 | 
---------------
但我需要按类别分类。有没有可能在同位素中做到这一点?如果有,你能提供一个例子吗

它还能像这样同时以两种(或更多)不同的方式进行排序吗

(请注意,猫是垂直排序的,而狗是水平排序的。)


不幸的是,目前版本(v2.1.0)的ISOTO无法支持您的请求,但您可以在类别中添加Null元素(如带高度和宽度的空div),并根据需要显示/隐藏它们,例如显示此顺序

-----------------------
| cat1 | dog1 | bird1 |
-----------------------
| cat2 | dog2 | bird2 |
-----------------------
| cat3 | dog3 | 
---------------
       | dog4 |
       --------
您可以添加一个空元素,并在最后一行显示项目,如下所示,并为其布局选择
cellsByColumn
。Null元素在内容和样式上没有任何内容。它们仅按高度/宽度填充空间

-----------------------
| cat1 | dog1 | bird1 |
-----------------------
| cat2 | dog2 | bird2 |
-----------------------
| cat3 | dog3 | 
---------------
| Null | dog4 |
---------------
为了实现另一种结构,您可以在第三列的点添加另一个空元素,并选择普通布局

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

查看我的和代码。

了解此类类似要求

我用过这个

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' });    
  }
功能排序(标签){
$('同位素项目')。每个(函数(索引,值)
{
var arrayOfCategories=$(this.attr('data-category').split(“”);
对于(变量i=0;i

通过传递“数据排序顺序”,我正在为某些类别项设置“数据排序顺序”属性函数的值将对具有此属性的元素进行排序。

请注意第二个问题,猫是垂直排序的,而狗是水平排序的。@rotaercz是的,我知道。我刚刚给出了如何进行排序的想法。您可以用一些普通的排序类型来实现这一点。@rotaercz我已经编辑了答案并添加了代码。我希望如此为了提供帮助,你能提供一些你正在做的事情吗?
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' });    
  }