筛选jquery拆分列表

我不太明白你是如何使用ListSplitter和Masonry插件的…

Masonry插件设置布局,并将布局拆分为所需的列数。如果查看布局页,Masonry将布局拆分为4列: #primary.listCol1 , .listCol2 , .listCol3 和 .listCol4.last . 因此,随后应用liststripper不起作用,因为列表已经被拆分。

如果您正在尝试对列表进行排序,可以查看 tinysort 插件,或者如果你只是想要一个漂亮的短脚本,从 this answer 需要稍微修改一下。

更新:我在看可过滤的脚本,但是我找不到一个好的简单的解决方案。但我确实找到了 this filterable tutorial 对我来说,这似乎更容易理解。我稍微修改了一下,使动画与可过滤脚本相同,结果是:

$(document).ready(function() {
  $('ul#portfolio-filter a').click(function() {
    $(this).css('outline','none');
    $('ul#portfolio-filter .current').removeClass('current');
    $(this).parent().addClass('current');

    var filterVal = $(this).text().toLowerCase().replace(' ','-');

    if(filterVal == 'all') {
      $('.portfolio li.hidden').animate({ width: 'show', opacity: 'show' }, 1000 ).removeClass('hidden');
    } else {
      $('.portfolio li').each(function() {
        if(!$(this).hasClass(filterVal)) {
          $(this).animate({ width: 'hide', opacity: 'hide' }, 1000 ).addClass('hidden');
        } else {
          $(this).animate({ width: 'show', opacity: 'show' }, 1000 ).removeClass('hidden');
        }
      });
    }
    return false;
  });
});

除了用上面的代码替换“jquery.filterablepack.js”内容外,您不应该更改任何内容。