Isotope StraightDown佈局模式與無限滾動之間的不均勻空間

Question

我有一個無限滾動在Yii MVC產品列表。我已經實現了兩個佈局模式，以提高用戶體驗

$(".layouts .list").click(function() { 
jQuery(function() { 
      var jQuerycontainer = jQuery('.items'); 
      jQuerycontainer.find('.view ').each(function() { 
       jQuery(this).addClass('large'); 
      }); 
      jQuerycontainer.isotope({ 
       layoutMode: 'straightDown', 
       itemSelector: '.view', 
       straightDown: { 
         columnWidth: 50 
       } 
      }); 
      $(document).ajaxComplete(function() { 
       jQuery(".layouts .list").click(); 
      }); 
      jQuerycontainer.find('.view').removeClass('small'); 
      jQuery(this).addClass('large');}); 
    return false; }); 


//-----------------Grid Click Function---------------// 
    $(".layouts .grid").click(function() { 
     jQuery(function() { 
      var jQuerycontainer = jQuery('.items'); 
      jQuerycontainer.find('.view ').each(function() { 
       jQuery(this).addClass('small'); 
      }); 
      jQuerycontainer.isotope({ 
       layoutMode: 'masonry', 
       itemSelector: '.view', 

       masonry: { 
        columnWidth: 50 
       } 
      }); 
      $(document).ajaxComplete(function() { 
       jQuery(".layouts .grid").click(); 
      }); 
      jQuerycontainer.find('.view').removeClass('large'); 
      jQuery(this).addClass('small'); 
      jQuerycontainer.isotope('reLayout'); 

     }); 
return false; }); 
    });` 

的主要問題是，當我切換到格但顯示網格style.but當我切換到列表模式的項目，它正確地顯示在列表中，但在一些項目之後有一些不平坦的空間，當我重新點擊列表時，它會相應地自動重新排列。

Answer 1

你應該嘗試這樣的事：

$container.isotope({ 
    masonry { 
    columnWidth: 50, 
    }, 
    straightDown: { 
    columnWidth: 50, 
    } 
}); 


var isMasonry = true; 

$('.layouts .grid').click(function() { 

    isMasonry= !isMasonry; 
    var sizeStyle = isMasonry ? 
     { minWidth: '100%', minHeight: '100%' } : 
     { minWidth: '100%', height: '100%' }; 

    $container.addClass('no-transition').css(sizeStyle); 
    var redraw = $container[0].offsetHeight; 

    $container.removeClass('no-transition') 
    .isotope({ 
     layoutMode: isMasonry ? 'masonry' : 'straightDown' 
    }); 

爲避免你需要做一些技巧與CSS過渡同位素元素之間沒有任何間隙。

見大衛Desandro這裏做出了表率：http://codepen.io/desandro/pen/ivjAI