Isotop 垂直标签需要在加载时显示第一个项目

Question

我使用 Isotop JS 过滤并在垂直选项卡中显示我的内容。在这里，我只是编辑了样式，例如在选项卡下显示单个项目。现在有一个问题：当初始加载页面时，它会显示选项卡内的所有内容。实际上我只需要在第一次加载时显示第一项内容。

这是我的代码：

// Loads Isotope
$('#items').isotope();

// Filters out items
$('#filters a').click(function(e) {
  e.preventDefault()
  var selector = $(this).attr('data-filter');
  $('#items').isotope({
    filter: selector
  });
});

ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}

.isotop-tabs {
  border-right: 1px solid #aaa;
}

.isotop-tabs li {
  float: none;
  width: 100%;
}

.isotop-tabs li a {
  display: block;
  padding: 10px 0
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.4/isotope.pkgd.min.js"></script>

<div id="isotope">

  <div class="col-sm-3">
    <ul class="isotop-tabs" id="filters">
      <li><a href="#" data-filter=".one">Item one</a></li>
      <li><a href="#" data-filter=".two">Item two</a></li>
      <li><a href="#" data-filter=".three">Item three</a></li>
      <li><a href="#" data-filter=".four">Item four</a></li>
      <li><a href="#" data-filter=".five">Item five</a></li>
    </ul>
  </div>

  <div class="col-sm-9">
    <div id="items" class="item-list">
      <div class="item one">
        <img src="https://placeholdit.co//i/555x150" class="img-responsive">
        <h3>Heading One</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class="item two">
        <img src="https://placeholdit.co//i/555x150" class="img-responsive">
        <h3>Heading Two</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class="item three">
        <img src="https://placeholdit.co//i/555x150" class="img-responsive">
        <h3>Heading Three</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class="item four">
        <img src="https://placeholdit.co//i/555x150" class="img-responsive">
        <h3>Heading Four</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class="item five">
        <img src="https://placeholdit.co//i/555x150" class="img-responsive">
        <h3>Heading Five</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
  </div>

</div>

这里还有 JSFiddle：https://jsfiddle.net/vishnuprasadps/c0kf8nyf/2/

Answer 1

在开始将第一项作为选择器传递时添加新的isotope()：

var first = $(".item:first")
$('#items').isotope({
    filter: first
});

// Filters out items
$('#filters a').click(function(e) {
    e.preventDefault()
    var selector = $(this).attr('data-filter');
    $('#items').isotope({
        filter: selector
    });
});

ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}

.isotop-tabs {
  border-right: 1px solid #aaa;
}

.isotop-tabs li {
  float: none;
  width: 100%;
}

.isotop-tabs li a {
  display: block;
  padding: 10px 0
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.4/isotope.pkgd.min.js"></script>
<div id="isotope">

  <div class="col-sm-3">
    <ul class="isotop-tabs" id="filters">
      <li><a href="#" data-filter=".one">Item one</a></li>
      <li><a href="#" data-filter=".two">Item two</a></li>
      <li><a href="#" data-filter=".three">Item three</a></li>
      <li><a href="#" data-filter=".four">Item four</a></li>
      <li><a href="#" data-filter=".five">Item five</a></li>
    </ul>
  </div>

  <div class="col-sm-9">
    <div id="items" class="item-list">
      <div class="item one">
        <img src="https://placeholdit.co//i/555x150" class="img-responsive">
        <h3>Heading One</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class="item two">
        <img src="https://placeholdit.co//i/555x150" class="img-responsive">
        <h3>Heading Two</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class="item three">
        <img src="https://placeholdit.co//i/555x150" class="img-responsive">
        <h3>Heading Three</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class="item four">
        <img src="https://placeholdit.co//i/555x150" class="img-responsive">
        <h3>Heading Four</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class="item five">
        <img src="https://placeholdit.co//i/555x150" class="img-responsive">
        <h3>Heading Five</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
  </div>

</div>