同位素响应在大屏幕上表现异常

Question

我已将同位素添加到反应灵敏的投资组合网站中，并且正在做一些奇怪的事情。 我希望它是3列，除非我的分辨率是980px，否则我希望它只是一个。 事情是在非常高分辨率的情况下（超过2000像素），我得到的只是一列，但如果它们的宽度为3（33.333％），则宽度相同，所以这不是一件事。 我无法确定发生了什么变化，我检查了CSS，但没有发现导致此变化的任何线索。

同样，发生这种情况的宽度也不一致。 我已经看到这种情况会在我获得2000px分辨率后立即发生，而下一次它将直到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/