鉻和同位素 - 頁面大小

Question

我不知道如何解釋這個問題的話。因此，讓我展示一些圖片：

我在頁面上有一個同位素插件和超過100個縮略圖。

• 藍：頁面大小
• 綠色：菜單
• 紅：頁腳
• 灰色：縮略圖/頁內容

當所有的縮略圖加載，頁面看起來像所有瀏覽器（一切都很好，頁面滾動）：

a busy cat http://phillip.com.pl/sample/inne/defaulf-no-filter.jpg

當縮略圖同位素過濾，而且也只留下了幾個大拇指，頁面看起來像上IE和火狐（一切都很好 - 頁面不可滾動和頁腳是在頁面的底部）：

a busy cat http://phillip.com.pl/sample/inne/ff-ie-filter.jpg

最後，當縮略圖被同位素過濾，而且也只有少數大拇指離開後，頁面看起來像上鉻（佈局是好的，但網頁仍然是滾動的，因爲它是同位素過濾前）：

a busy cat http://phillip.com.pl/sample/inne/chrome-filter.jpg

這是一個錯誤鉻，或者我應該看看我的js/css文件？

有所有的JS同位素：

<script src="/assets/js/jquery.isotope.js" type="text/javascript"></script> 
<script type="text/javascript"> 
     $(function(){ 
     var $container = $('#grid-items'); 
     $container.imagesLoaded(function(){ 
      $container.isotope({ 
       itemSelector : '.pin', 
       layoutMode : 'fitRows', 

       getSortData : { 
        name : function($elem) { 
        return $elem.find('.name').text(); 
        }, 
        votescore : function($elem) { 
        return parseInt($elem.find('.votescore').text(), 10); 
        }, 
        popularity : function($elem) { 
        return parseInt($elem.find('.views').text(), 10); 
        }, 
        commentscount : function($elem) { 
        return parseInt($elem.find('.comments_link').text(), 10); 
        } 
       } 
     }); 
    }); 


    // SORTING: 
    $('#sort-by a').click(function(){ 

     var sortBool; 

     if($(this).find('i.icon-down_arrow').length != 0){ 
      if ($(this).hasClass('selected')) { 
       $(this).find('i').removeClass('icon-down_arrow'); 
       $(this).find('i').addClass('icon-up_arrow'); 
       if($(this).hasClass('class_text')){ 
        sortBool = true; 
       }else{ 
        sortBool = false; 
       } 
      }else{ 
       if($(this).hasClass('class_text')){ 
        sortBool = false; 
       }else{ 
        sortBool = true; 
       } 
      } 
     }else{ 
      if ($(this).hasClass('selected')) { 
       $(this).find('i').removeClass('icon-up_arrow'); 
       $(this).find('i').addClass('icon-down_arrow'); 
        if($(this).hasClass('class_text')){ 
         sortBool = false; 
        }else{ 
         sortBool = true; 
        } 
       }else{ 
        if($(this).hasClass('class_text')){ 
         sortBool = true; 
        }else{ 
         sortBool = false; 
        } 
       } 
      } 
      var sortName = $(this).attr('href').slice(1); 
      $('#sort-by a').each(function() { 
       $(this).removeClass('selected'); 
      }); 
      $(this).addClass('selected'); 
      $container.isotope({ 
       sortBy : sortName, 
       sortAscending : sortBool 
      }); 
      return false; 
     }); 

     // FILTERING: 

     $('#filters a').click(function(){ 
      $('#filters a').each(function() { 
       $(this).removeClass('selected'); 
      }); 
      $(this).addClass('selected'); 
      var selector = $(this).attr('data-filter'); 
      $container.isotope({ filter: selector }); 
      return false; 
     });  
    }); 
</script> 

Answer 1

根據我的經驗，同位素（明顯）取決於你在使用它的模式，該模式的值。有些東西有時在某些模式中工作，而不在其他模式中工作。我會梳理文檔並查看你的JS文件，看看你能做什麼。你現在用什麼模式？

http://isotope.metafizzy.co/docs/layout-modes.html

[編輯] 下面layoutMode:'fitRows'行嘗試onLayout: function() {alert('onLayout callback')}。