Question

有2个选项卡（数据组）-图形和徽标，带有图像，每个选项卡包含3张图像，共6张图像。过滤器运行良好，当您单击第一个选项卡时，该过滤器处于活动状态，并显示已过滤的3个图像，它们属于第一个数据组（图形）。但是，当刷新页面时，您也会看到第一个活动选项卡（数据组图形），但显示所有6张图像，这是错误的。过滤器仅在您单击选项卡后才开始工作。它应仅显示其中3个与数据组匹配的数据。我已经尝试了this post中的几个脚本和解决方案。没事。有解决办法吗？

function portfolio_init() {
  var portfolio_grid = $('#portfolio_grid'),
    portfolio_filter = $('#portfolio_filters');

  if (portfolio_grid) {

    portfolio_grid.shuffle({
      speed: 450,
      itemSelector: 'figure'
    });

    $('.site-main-menu').on("click", "a", function(e) {
      portfolio_grid.shuffle('update');
    });


    portfolio_filter.on("click", ".filter", function(e) {
      portfolio_grid.shuffle('update');
      e.preventDefault();
      $('#portfolio_filters .filter').parent().removeClass('active');
      $(this).parent().addClass('active');
      portfolio_grid.shuffle('shuffle', $(this).attr('data-group'));
    });

  }
}

<!-- Portfolio Subpage -->
<section class="pt-page pt-page-4" data-id="portfolio">
  <div class="border-block-top-110"></div>
  <div class="section-inner">
    <div class="section-title-block">
      <div class="section-title-wrapper">
        <h2 class="section-title">Portfolio</h2>
        <h5 class="section-description">Works</h5>
      </div>
    </div>

    <!-- Portfolio Content -->
    <div class="portfolio-content">

      <!-- Portfolio filter -->
      <ul id="portfolio_filters" class="portfolio-filters">
        <li class="active">
          <a class="filter btn btn-sm btn-link active" data-group="graphics">Graphics</a>
        </li>
        <li>
          <a class="filter btn btn-sm btn-link" data-group="logo">Logo</a>
        </li>
        <li>
          <a class="filter btn btn-sm btn-link" data-group="print">Print</a>
        </li>
        <li>
          <a class="filter btn btn-sm btn-link" data-group="billboards">Billboards</a>
        </li>
        <li>
          <a class="filter btn btn-sm btn-link" data-group="misc">Misc</a>
        </li>
        <li>
          <a class="filter btn btn-sm btn-link" data-group="photo">Photo</a>
        </li>
      </ul>
      <!-- End of Portfolio filter -->

      <!-- Portfolio Grid -->
      <div id="portfolio_grid" class="portfolio-grid portfolio-masonry masonry-grid-3">

        <!-- Portfolio 1 - Graphics -->
        <figure class="item gallery" data-groups='["graphics"]'>
          <a href="images/portfolio/full/3.jpg" class="lightbox f-gallery" title="bnr 1">
            <img src="images/portfolio/3.jpg" alt="">
            <div>
              <h5 class="name">bnr 1</h5>
              <small>Graphics</small>
              <i class="pe-7s-icon pe-7s-photo"></i>
            </div>
          </a>
          <a href="images/portfolio/full/4.jpg" title="bnr 1"></a>
          <a href="images/portfolio/full/5.jpg" title="bnr 2"></a>
        </figure>

        <figure class="item gallery" data-groups='["graphics"]'>
          <a href="images/portfolio/full/3.jpg" class="lightbox f-gallery" title="bnr 2">
            <img src="images/portfolio/3.jpg" alt="">
            <div>
              <h5 class="name">bnr 2</h5>
              <small>Graphics</small>
              <i class="pe-7s-icon pe-7s-photo"></i>
            </div>
          </a>
          <a href="images/portfolio/full/4.jpg" title="Some text"></a>
          <a href="images/portfolio/full/5.jpg" title="Some text"></a>
        </figure>

        <figure class="item gallery" data-groups='["graphics"]'>
          <a href="images/portfolio/full/3.jpg" class="lightbox f-gallery" title="bnr 3">
            <img src="images/portfolio/3.jpg" alt="">
            <div>
              <h5 class="name">bnr 3</h5>
              <small>Graphics</small>
              <i class="pe-7s-icon pe-7s-photo"></i>
            </div>
          </a>
          <a href="images/portfolio/full/4.jpg" title="Some text"></a>
          <a href="images/portfolio/full/5.jpg" title="Some text"></a>
        </figure>
        <!-- /Portfolio 1 - Graphics -->


        <!-- Portfolio 2 - Logo -->
        <figure class="item gallery" data-groups='["logo"]'>
          <a href="images/portfolio/full/3.jpg" class="lightbox f-gallery" title="logo 1">
            <img src="images/portfolio/3.jpg" alt="">
            <div>
              <h5 class="name">logo 1</h5>
              <small>Logo</small>
              <i class="pe-7s-icon pe-7s-photo"></i>
            </div>
          </a>
          <a href="images/portfolio/full/4.jpg" title="bnr 1"></a>
          <a href="images/portfolio/full/5.jpg" title="bnr 2"></a>
        </figure>

        <figure class="item gallery" data-groups='["logo"]'>
          <a href="images/portfolio/full/3.jpg" class="lightbox f-gallery" title="logo 2">
            <img src="images/portfolio/3.jpg" alt="">
            <div>
              <h5 class="name">logo 2</h5>
              <small>Logo</small>
              <i class="pe-7s-icon pe-7s-photo"></i>
            </div>
          </a>
          <a href="images/portfolio/full/4.jpg" title="Some text"></a>
          <a href="images/portfolio/full/5.jpg" title="Some text"></a>
        </figure>

        <figure class="item gallery" data-groups='["logo"]'>
          <a href="images/portfolio/full/3.jpg" class="lightbox f-gallery" title="logo 3">
            <img src="images/portfolio/3.jpg" alt="">
            <div>
              <h5 class="name">logo 3</h5>
              <small>Logo</small>
              <i class="pe-7s-icon pe-7s-photo"></i>
            </div>
          </a>
          <a href="images/portfolio/full/4.jpg" title="Some text"></a>
          <a href="images/portfolio/full/5.jpg" title="Some text"></a>
        </figure>
        <!-- /Portfolio 2 - Logo -->


      </div>
      <!-- /Portfolio Grid -->

    </div>
    <!-- /Portfolio Content -->
  </div>

</section>
<!-- /Portfolio Subpage -->

Answer 1

现在可以使用了，图片在页面加载时被过滤。添加此代码。

    $(document).ready(function() {
        $('#portfolio_filters .grph').trigger( "click" );
    });

}
// /Portfolio subpage filters

我还在这里添加了“ grph”类：

      <!-- Portfolio filter -->
  <ul id="portfolio_filters" class="portfolio-filters">
    <li class="active">
      <a class="filter btn btn-sm btn-link active grph" data-group="graphics">Graphics</a>
    </li>
    <li>

Answer 2

我来这里的目的是寻找相同问题的答案，但无法获得有效的解决方案，但是它成功地为我指出了正确的方向，可以通过创建一个在页面加载时执行的函数最终解决该问题：

function shuffleInit (id){
	$(document).ready(function() {
		$('#grid').hide();
        jQuery('#'+id)[0].click();
        $('#grid').show();
		$('#'+id).trigger('click');
	});

<body onload="shuffleInit('graphics');">

请记住将ID添加到过滤器div，以便shuffleInit（）函数可以将其作为目标。请注意，＃grid是图像的默认shuffle.js容器-我添加了hide和show命令以隐藏页面加载时可见的重新随机播放动画。最后一次点击触发线只是突出显示按钮的装饰效果，以便用户查看已应用了哪个过滤器选项。

这可与Bootstrap 3配合使用。希望对您有所帮助！

Shuffle.js-在页面加载时过滤图像

2 个答案: