Question

我正在将Isotope与Foundation 5整合为一个图像库，我遇到了一个问题。使用砖石布局，我有5个过滤器：全部，内部，外部，墙壁，地板。当我点击它们时，前三个过滤器布局很好，但是一旦我点击“墙”或“地板”过滤器，所有项目都减少到一列。另外奇怪的行为是，当我选择“Wall”或“Floor”过滤器时，我点击“外部”过滤器，它也会减少到一列。直到我点击“全部”或“内部”过滤器，列才会改为砌体布局。基本上，只有前3个过滤器可以工作，尽管第三个过滤器也有问题。

如果我将布局更改为'fitRows'，则所有过滤器都可以正常工作。我正在使用媒体查询以全宽度显示5个项目，并在移动布局上显示2个项目。

HTML：

<div class="row">
  <div class="large-12 columns">
    <dl id="filters" class="sub-nav">
      <dt>Filter:</dt>
      <dd class="active" data-filter="*"><a href="#">All</a></dd>
      <dd data-filter=".int"><a href="#">Interior</a></dd>
      <dd data-filter=".ext"><a href="#">Exterior</a></dd>
      <dd data-filter=".wall"><a href="#">Wall</a></dd>
      <dd data-filter=".floor"><a href="#">Floor</a></dd>
    </dl>
  </div>
</div>

<div class="row">
  <div class="large-12 columns">
    <div id="isoContainer">
        <div class="isoItem int"><img src="http://placehold.it/400x400"></div>
        <div class="isoItem int"><img src="http://placehold.it/400x400"></div>
        <div class="isoItem int"><img src="http://placehold.it/400x400"></div>
        <div class="isoItem floor"><img src="http://placehold.it/400x400"></div>
        <div class="isoItem ext"><img src="http://placehold.it/400x400"></div>
        <div class="isoItem ext"><img src="http://placehold.it/400x400"></div>
        <div class="isoItem wall"><img src="http://placehold.it/400x400"></div>
        <div class="isoItem int"><img src="http://placehold.it/400x400"></div>
        <div class="isoItem wall"><img src="http://placehold.it/400x400"></div>
        <div class="isoItem int"><img src="http://placehold.it/400x400"></div>
        <div class="isoItem wall"><img src="http://placehold.it/400x400"></div>
        <div class="isoItem ext"><img src="http://placehold.it/400x400"></div>
        <div class="isoItem floor"><img src="http://placehold.it/400x400"></div>
        <div class="isoItem ext"><img src="http://placehold.it/400x400"></div>
        <div class="isoItem wall"><img src="http://placehold.it/400x400"></div>
        <div class="isoItem int"><img src="http://placehold.it/400x400"></div>          
    </div>
  </div>
</div>

JS：

<script>
  var $container = $('#isoContainer');
  $(window).load(function(){
    $container.isotope({
      // options
      itemSelector: '.isoItem',
      layoutMode: 'masonry',
      resizable: false, // disable normal resizing    
    });

    // update columnWidth on window resize
    $(window).smartresize(function(){
      $container.isotope({
        masonry: { columnWidth: 182 }
      });
    });

    $('#filters').on( 'click', 'dd', function( event ) {
      var filtr = $(this).attr('data-filter');

        $container.isotope({ filter: filtr });

    });
  });
    $('#filters dd').click(function(){
    $('#filters dd.active').removeClass('active');
    var selector = $(this).attr('data-filter');
    $container.isotope({ filter: selector });
    $(this).addClass('active');
    return false;
  });

</script>

同位素过滤器打破砌体布局

0 个答案: