0

这个问题是这个问题的后续： 同位素网格+角戳去除空格，排序逻辑

那里的答案在未过滤的同位素布局上完美无缺。但是，一旦删除了某些元素，此功能就会停止工作。

我想知道是否有一种好方法可以修改上一个答案中的代码以适应这种情况。

这是一个在点击角戳时添加了一个基本过滤器的小提琴：http: //jsfiddle.net/zewkG/13/

请注意，在单击要过滤的角标后，单击元素 11 或 15 时，布局再次出现间隙。

4

1 回答 1

2

在这里你有解决方案：http: //jsfiddle.net/zewkG/14/

$('.corner-stamp').click( function() {
    $container.isotope( 'destroy' );
    grid('.item.odd');
    $container.isotope('remove', $('.item:not(.odd)') )    
    $container.isotope('updateSortData', $('.item.odd'));
});

编辑：

固定答案：http: //jsfiddle.net/zewkG/16/

问题出在这里：

getSortData : {
      fitOrder : function( $item ) {
        var index = $item.index();

它应该是：

getSortData : {
      fitOrder : function( $item ) {
        var index = $item.index(selector);

这样我们就可以消除-1排序逻辑中的丑陋：

if ( $item.hasClass('large')) {
      if(index>10){
          order = Math.floor((index-1) / (columns))*(columns) + 1.5;
      }else{
          order = Math.floor((index-1) / (columns-1))*(columns-1) + .5;
      }
}

变成

if ( $item.hasClass('large')) {
      if(index>10){
          order = Math.floor((index) / (columns))*(columns) + 1.5;
      }else{
          order = Math.floor((index) / (columns-1))*(columns-1) + .5;
      }
}

那是因为

  • 当我们拥有所有盒子时，box1的索引为0，box2的索引为1，box3的索引为2...
  • 当我们有奇数时，box1的索引是0，box3的索引是1，box5的索引是2......

所以我们打破了一个盒子的文本和它的索引之间的对应关系，以保持排序逻辑。

最后，

$('.corner-stamp').click( function() {
    $container.isotope( 'destroy' );
    grid('.item.odd');
    $('.item:not(.odd)').css('display','none');   
});

我们需要$('.item:not(.odd)').css('display','none')，因为如果我们不这样做，偶数框会显示在动画奇数框下方。

编辑2：

你还记得我发现http://jsfiddle.net/zewkG/8/有一个bug：box number 13,17,21（在行的末尾），当点击时，他们转到下一行而不是行首；所以我在http://jsfiddle.net/zewkG/9 ​​/ 中修复了它？

但在那之后，我们似乎有一个回归，固定的排序逻辑被旧的取代了。

所以我在 http://jsfiddle.net/zewkG/20/ 中修复了你的http://jsfiddle.net/zewkG/19/

固定的排序逻辑是：

if ($item.hasClass('large')) {
    if(index>10){
        order = Math.floor((index-1) / (columns))*(columns) + 1.5;
    }else{
        order = Math.floor((index) / (columns-1))*(columns-1) + .5;
    }
}else {
    order = index + 1;
}
于 2012-08-15T23:21:16.380 回答