Question

我已将同位素添加到投资组合网站中，该网站具有响应性并且正在做一些奇怪的事情。我希望它是3列，除非我在980px分辨率，我希望它只是一个。事情是在非常高的分辨率（超过2000px）我只得到一个colum但是在相同的宽度，如果他们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%;
  }

同位素响应在真正的大屏幕上表现奇怪

1 个答案:

JSiddle：http://jsfiddle.net/TrueBlueAussie/zUfce/10/