0

我不知道如何用文字来解释这个问题。所以让我展示一些图片：

我在页面上有一个同位素插件和 100 多个缩略图。

  • 蓝色：页面大小
  • 绿色：菜单
  • 红色：页脚
  • 灰色：缩略图/页面内容

加载所有缩略图后，页面在所有浏览器上看起来都像这样（一切都很好，页面是可滚动的）：

一只忙碌的猫 http://phillip.com.pl/sample/inne/defaulf-no-filter.jpg

当缩略图被同位素过滤，并且只剩下几个拇指时，页面看起来像IE和Firefox上的那样（一切都很好 - 页面不可滚动，页脚位于页面底部）：

一只忙碌的猫 http://phillip.com.pl/sample/inne/ff-ie-filter.jpg

最后，当缩略图被同位素过滤，并且只剩下几个拇指时，页面看起来像在Chrome上的那样（布局很好，但页面仍然可以像同位素过滤器之前一样滚动）：

一只忙碌的猫 http://phillip.com.pl/sample/inne/chrome-filter.jpg

这是 chrome 中的错误，还是我应该查看我的 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>
4

1 回答 1

1

根据我的经验，同位素（显然）取决于您使用它的模式以及该模式的值。有些东西有时在某些模式下起作用，而在其他模式下不起作用。我会梳理文档并查看您的 JS 文件，看看您能做什么。你现在用什么模式？

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

[编辑] 试试onLayout: function() {alert('onLayout callback')}下面的行layoutMode:'fitRows'。

于 2013-09-26T22:48:45.093 回答