Jquery 同位素反应在大屏幕上表现得很奇怪

我在一个投资组合网站上添加了同位素，该网站反应迅速，而且做了一些奇怪的事情。我希望它是3列，除非我在980px分辨率上，我希望它只有一列。这个东西的分辨率非常高（超过2000px），我只得到一个柱，但如果它们的宽度是3（33.333%），那么它不是一个东西，也不是另一个。我无法找出是什么造成了这种变化，我检查了css，没有发现导致这种变化的任何线索

同时，发生这种情况的宽度也不一致。当我获得2000px的分辨率时，我就看到了这种情况，而下一次它要到2200度左右才会出现。我尝试在JSFIDLE中复制它：

但是你可以在中看到我的prepod站点

我的脚本：

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;
  });

我的SCS是为此添加的（这不是同位素css）

---

你基本上是两次遇到一个问题。舍入误差

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

然后，通过使用33.3333%作为元素宽度，这实际上超过了一个同位素列宽（非常轻微），并导致仅显示一个列（两个适合的列中的一个）

将其更改为33.3%，效果良好：

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

---

JSiddle here:基本上，您两次遇到一个问题。舍入误差

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

然后，通过使用33.3333%作为元素宽度，这实际上超过了一个同位素列宽（非常轻微），并导致仅显示一个列（两个适合的列中的一个）

将其更改为33.3%，效果良好：

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

---

JSiddle here：对于初学者，您可以排除

媒体

查询。当过滤器启动时，我将容器设置为黄色，它是不相关的，所以我完全移除了过滤器，问题仍然存在。如果您一直将其设置为33%，您仍然会遇到同样的问题，即它会在较大宽度上下降到一列。仍在调查…+1对于非常好的JSFIDLE。使调查变得更加容易。对于初学者，您可以排除

媒体

查询。当过滤器启动时，我将容器设置为黄色，它是不相关的，所以我完全移除了过滤器，问题仍然存在。如果您一直将其设置为33%，您仍然会遇到同样的问题，即它会在较大宽度上下降到一列。仍在调查…+1对于非常好的JSFIDLE。使调查变得更容易。是的，我添加了那些额外的。33，因为我看到柱之间有一个小间隙，但不管怎样，我会尝试你的解决方案。是的，就是这样。我发现这个问题出现在随机宽度上真的很奇怪，现在我知道为什么了。谢谢是的，我加了那些额外的.33，因为我看到柱子之间有一个小间隙，但不管怎样，我会试试你的解决方案是的，就是这样。我发现这个问题出现在随机宽度上真的很奇怪，现在我知道为什么了。谢谢