jquery - 同位素响应在真正的大屏幕上表现异常

Question

我已经将 isotope 添加到一个响应迅速的投资组合网站，并且它正在做一些奇怪的事情。我希望它是 3 列，除非我在 980px 分辨率下我希望它只是一列。事情的分辨率非常高(超过 2000 像素)，我只得到一个列，但如果它们的宽度为 3(33.333%)，那么它就不是一回事了。我无法找出发生更改的原因，我检查了 CSS，但没有发现任何导致这种情况的线索。

此外，发生这种情况的宽度也不一致。我已经看到这种情况在我获得 2000 像素分辨率时立即发生，而下一次它不会发生，直到它达到 2200 或类似的分辨率。我试图在此处的 jsfiddle 中重现它:

http://jsfiddle.net/zUfce/8/

但是你可以在http://www.vitaminalemon.com/bm2/trabajos/ 中看到我的preprod 网站

我的同位素脚本:

var $container = $('#container');
    function resize_element(){
        var height=$('.element').width();
        $('.element').height(height);
    }
    resize_element();

    $container.isotope({
        itemSelector : '.element',
        animationEngine: 'best-available',
        filter: '.destacados',
        resizable: false, // disable normal resizing
        masonry: { columnWidth: $container.width() / 3 }
    });
    $(window).smartresize(function(){
        resize_element();
      $container.isotope({
        // update columnWidth to a percentage of container width
        masonry: { columnWidth: $container.width() / 3 }
      });
    });

    function initialize() {
       var divH = $('.proyect-title p').innerHeight()/2;
       var pageH = $('.proyect-title').innerHeight()/2;
      $('.proyect-title p').css({top: (pageH-divH)});
    }

    initialize();

    $(window).on('resize',function(){
      initialize();
    });


  var $optionSets = $('#options .option-set'),
      $optionLinks = $optionSets.find('a');

  $optionLinks.click(function(){
    var $this = $(this);
    // don't proceed if already selected
    if ( $this.hasClass('selected') ) {
      return false;
    }
    var $optionSet = $this.parents('.option-set');
    $optionSet.find('.selected').removeClass('selected');
    $this.addClass('selected');

    // make option object dynamically, i.e. { filter: '.my-filter-class' }
    var options = {},
        key = $optionSet.attr('data-option-key'),
        value = $this.attr('data-option-value');
    // parse 'false' as false boolean
    value = value === 'false' ? false : value;
    options[ key ] = value;
    if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
      // changes in layout modes need extra logic
      changeLayoutMode( $this, options )
    } else {
      // otherwise, apply new options
      $container.isotope( options );
    }

    return false;
  });

为此添加了我的 scss(这不是同位素 css)

.element{
    cursor: pointer;
    width:100%;
            float: left;
            overflow: hidden;
            position: relative;
            background: #000;
            color: #fff;
    img{
        @include opacity(0.4);
        @include transition-property(opacity);
        @include transition-duration(1s); 
    }
    &:hover img, &.active-tag img{
        @include opacity(0.8);
    }
}
@media only screen and (min-width: #{$small-screen}){

    .element{
        width: 33.3333%;
    }

}

Answer 1

您基本上会遇到一个问题两次。舍入错误。

通过使用/3 作为宽度，它实际上可以只包含适合容器的 2 列。

然后通过使用 33.3333% 作为元素宽度，这实际上超过了一个同位素列宽度(非常小)并且导致仅显示一列(适合的两列)。

将其更改为 33.3%，效果很好:

@media only screen and (min-width: 980px) {
  #trabajos .element {
    width: 33.3%;
  }

JSiddle 在这里:http://jsfiddle.net/TrueBlueAussie/zUfce/10/