Question

我使用Bootstrap模板工作，想要更改＆＃34;投资组合部分＆＃34;。目前，HTML中加载的所有图像都默认显示，然后，一旦选择了标题，图像就会被清除，只显示连接到该标题的图像（数据过滤器）。

我只想更改默认行为。默认情况下，不会显示任何图像。然后，一旦选择了标题，图像就像上面解释的那样加载。

这是Javascript：

 // portfolio filter
$(window).load(function() {
    'use strict',
    $portfolio_selectors = $('.portfolio-filter >li>a');
    if ($portfolio_selectors != 'undefined') {
        $portfolio = $('.portfolio-items');
        $portfolio.isotope({
            itemSelector: '.col-sm-3',
            layoutMode: 'fitRows'
        });

        $portfolio_selectors.on('click', function() {
            $portfolio_selectors.removeClass('active');
            $(this).addClass('active');
            var selector = $(this).attr('data-filter');
            $portfolio.isotope({
                filter: selector
            });
            return false;
        });
    }
});

和HTML：

<section id="portfolio">
    <div class="container">
        <div class="row text-center">
            <div class="col-sm-8 col-sm-offset-2">
                <h2 class="title-one">Portfolio</h2>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit.</p>
            </div>
        </div>
        <ul class="portfolio-filter text-center">
            <li><a class="btn btn-default active" href="#" data-filter="*">All</a>
            </li>
            <li><a class="btn btn-default" href="#" data-filter=".html">Html</a>
            </li>
            <li><a class="btn btn-default" href="#" data-filter=".wordpress">Wordpress</a>
            </li>
            <li><a class="btn btn-default" href="#" data-filter=".joomla">Joomla</a>
            </li>
            <li><a class="btn btn-default" href="#" data-filter=".megento">Megento</a>
            </li>
        </ul>
        <!--/#portfolio-filter-->
        <div class="portfolio-items">
            <div class="col-sm-3 col-xs-12 portfolio-item html">
                <div class="view efffect">
                    <div class="portfolio-image">
                        <img src="images/our-team/bella.jpg" alt="">
                    </div>
                    <div class="mask text-center">
                        <h3>Novel</h3>
                        <h4>Lorem ipsum dolor sit amet consectetur</h4>
                        <a href="#"><i class="fa fa-link"></i></a>
                        <a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-12 portfolio-item jooma">
                <div class="view efffect">
                    <div class="portfolio-image">
                        <img src="images/our-team/constance.jpg" alt="">
                    </div>
                    <div class="mask text-center">
                        <h3>Novel</h3>
                        <h4>Lorem ipsum dolor sit amet consectetur</h4>
                        <a href="#"><i class="fa fa-link"></i></a>
                        <a href="images/portfolio/big-item4.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-12 portfolio-item wordpress">
                <div class="view efffect">
                    <div class="portfolio-image">
                        <img src="images/our-team/francell.jpg" alt="">
                    </div>
                    <div class="mask text-center">
                        <h3>Novel</h3>
                        <h4>Lorem ipsum dolor sit amet consectetur</h4>
                        <a href="#"><i class="fa fa-link"></i></a>
                        <a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-12 portfolio-item megento">
                <div class="view efffect">
                    <div class="portfolio-image">
                        <img src="images/portfolio/4.jpg" alt="">
                    </div>
                    <div class="mask text-center">
                        <h3>Novel</h3>
                        <h4>Lorem ipsum dolor sit amet consectetur</h4>
                        <a href="#"><i class="fa fa-link"></i></a>
                        <a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-12 portfolio-item html">
                <div class="view efffect">
                    <div class="portfolio-image">
                        <img src="images/portfolio/5.jpg" alt="">
                    </div>
                    <div class="mask text-center">
                        <h3>Novel</h3>
                        <h4>Lorem ipsum dolor sit amet consectetur</h4>
                        <a href="#"><i class="fa fa-link"></i></a>
                        <a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-12 portfolio-item wordpress">
                <div class="view efffect">
                    <div class="portfolio-image">
                        <img src="images/portfolio/6.jpg" alt="">
                    </div>
                    <div class="mask text-center">
                        <h3>Novel</h3>
                        <h4>Lorem ipsum dolor sit amet consectetur</h4>
                        <a href="#"><i class="fa fa-link"></i></a>
                        <a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-12 portfolio-item html">
                <div class="view efffect">
                    <div class="portfolio-image">
                        <img src="images/portfolio/7.jpg" alt="">
                    </div>
                    <div class="mask text-center">
                        <h3>Novel</h3>
                        <h4>Lorem ipsum dolor sit amet consectetur</h4>
                        <a href="#"><i class="fa fa-link"></i></a>
                        <a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-12 portfolio-item joomla">
                <div class="view efffect">
                    <div class="portfolio-image">
                        <img src="images/portfolio/8.jpg" alt="">
                    </div>
                    <div class="mask text-center">
                        <h3>Novel</h3>
                        <h4>Lorem ipsum dolor sit amet consectetur</h4>
                        <a href="#"><i class="fa fa-link"></i></a>
                        <a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-12 portfolio-item html">
                <div class="view efffect">
                    <div class="portfolio-image">
                        <img src="images/portfolio/9.jpg" alt="">
                    </div>
                    <div class="mask text-center">
                        <h3>Novel</h3>
                        <h4>Lorem ipsum dolor sit amet consectetur</h4>
                        <a href="#"><i class="fa fa-link"></i></a>
                        <a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-12 portfolio-item wordpress">
                <div class="view efffect">
                    <div class="portfolio-image">
                        <img src="images/portfolio/10.jpg" alt="">
                    </div>
                    <div class="mask text-center">
                        <h3>Novel</h3>
                        <h4>Lorem ipsum dolor sit amet consectetur</h4>
                        <a href="#"><i class="fa fa-link"></i></a>
                        <a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-12 portfolio-item joomla">
                <div class="view efffect">
                    <div class="portfolio-image">
                        <img src="images/portfolio/11.jpg" alt="">
                    </div>
                    <div class="mask text-center">
                        <h3>Novel</h3>
                        <h4>Lorem ipsum dolor sit amet consectetur</h4>
                        <a href="#"><i class="fa fa-link"></i></a>
                        <a href="images/portfolio/big-item3.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-sm-3 col-xs-12 portfolio-item megento">
                <div class="view efffect">
                    <div class="portfolio-image">
                        <img src="images/portfolio/12.jpg" alt="">
                    </div>
                    <div class="mask text-center">
                        <h3>Novel</h3>
                        <h4>Lorem ipsum dolor sit amet consectetur</h4>
                        <a href="#"><i class="fa fa-link"></i></a>
                        <a href="images/portfolio/big-item4.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>

</section>
<!--/#portfolio-->

Answer 1

我在你的代码中修改了一些东西：

isotope无法识别，因此我将其删除。
我替换了您搜索隐藏\显示的项目的方式：

$('.portfolio-item').not(selector).hide(); $('.portfolio-item'+selector).show();

＆＃13;

// portfolio filter
$portfolio_selectors = $('.portfolio-filter >li>a');
if($portfolio_selectors!='undefined'){
$portfolio = $('.portfolio-items');
/*
$portfolio.isotope({
itemSelector : '.col-sm-3',
layoutMode : 'fitRows'
});
*/

$portfolio_selectors.on('click', function(){
$portfolio_selectors.removeClass('active');
$(this).addClass('active');
var selector = $(this).attr('data-filter');

$('.portfolio-item').not(selector).hide();
$('.portfolio-item'+selector).show();

return false;
});
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="portfolio">
<div class="container">
<div class="row text-center">
<div class="col-sm-8 col-sm-offset-2">
<h2 class="title-one">Portfolio</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit.</p>
</div>
</div>
<ul class="portfolio-filter text-center">
<li><a class="btn btn-default active" href="#" data-filter="*">All</a></li>
<li><a class="btn btn-default" href="#" data-filter=".html">Html</a></li>
<li><a class="btn btn-default" href="#" data-filter=".wordpress">Wordpress</a></li>
<li><a class="btn btn-default" href="#" data-filter=".joomla">Joomla</a></li>
<li><a class="btn btn-default" href="#" data-filter=".megento">Megento</a></li>
</ul><!--/#portfolio-filter-->
<div class="portfolio-items">
<div class="col-sm-3 col-xs-12 portfolio-item html">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/our-team/bella.jpg" alt=""></div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<a href="#"><i class="fa fa-link"></i></a>
<a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item jooma">
<div class="view efffect" >
<div class="portfolio-image">
<img src="images/our-team/constance.jpg" alt="">
</div>
  <div class="mask text-center html">
    <h3>.html</h3>
    <h4> .html.html.html.html</h4>
    <a href="#"><i class="fa fa-link"></i></a>
    <a href="images/portfolio/big-item4.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
  </div>
  </div>
  </div>
  <div class="col-sm-3 col-xs-12 portfolio-item wordpress">
  <div class="view efffect">
  <div class="portfolio-image">
  <img src="images/our-team/francell.jpg" alt="">
  </div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<a href="#"><i class="fa fa-link"></i></a>
<a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item megento">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/4.jpg" alt="">
</div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<a href="#"><i class="fa fa-link"></i></a>
<a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item html">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/5.jpg" alt="">
</div> <div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<a href="#"><i class="fa fa-link"></i></a>
<a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item wordpress">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/6.jpg" alt="">
</div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<a href="#"><i class="fa fa-link"></i></a>
<a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item html">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/7.jpg" alt="">
</div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<a href="#"><i class="fa fa-link"></i></a>
<a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item joomla">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/8.jpg" alt=""></div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<a href="#"><i class="fa fa-link"></i></a>
<a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item html">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/9.jpg" alt="">
</div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<a href="#"><i class="fa fa-link"></i></a>
<a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item wordpress">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/10.jpg" alt=""></div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<a href="#"><i class="fa fa-link"></i></a>
<a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item joomla">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/11.jpg" alt=""></div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<a href="#"><i class="fa fa-link"></i></a>
<a href="images/portfolio/big-item3.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-12 portfolio-item megento">
<div class="view efffect">
<div class="portfolio-image">
<img src="images/portfolio/12.jpg" alt=""></div>
<div class="mask text-center">
<h3>Novel</h3>
<h4>Lorem ipsum dolor sit amet consectetur</h4>
<a href="#"><i class="fa fa-link"></i></a>
<a href="images/portfolio/big-item4.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
</div>
</div>
</div>
</div>
</div>

</section> <!--/#portfolio-->

＆＃13;

Answer 2

要在使用isotope加载页面时默认清除所有图像，您可以设置虚拟同位素启动过滤器。请查看下面的代码段（查看全屏视图以获得更好的理解）。在这里，我添加了filter: '.dummy'以默认隐藏所有图片。

＆＃13;

// portfolio filter
$(window).load(function() {
  'use strict',
  $portfolio_selectors = $('.portfolio-filter >li>a');
  if ($portfolio_selectors != 'undefined') {
    $portfolio = $('.portfolio-items');
    $portfolio.isotope({
      itemSelector: '.col-sm-3',
      layoutMode: 'fitRows',
      filter: '.dummy'
    });

    $portfolio_selectors.on('click', function() {
      $portfolio_selectors.removeClass('active');
      $(this).addClass('active');
      var selector = $(this).attr('data-filter');
      $portfolio.isotope({
        filter: selector
      });
      return false;
    });
  }
});

＆＃13;

<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/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>

<section id="portfolio">
  <div class="container">
    <div class="row text-center">
      <div class="col-sm-8 col-sm-offset-2">
        <h2 class="title-one">Portfolio</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit.</p>
      </div>
    </div>
    <ul class="portfolio-filter text-center">
      <li><a class="btn btn-default active" href="#" data-filter="*">All</a></li>
      <li><a class="btn btn-default" href="#" data-filter=".html">Html</a></li>
      <li><a class="btn btn-default" href="#" data-filter=".wordpress">Wordpress</a></li>
      <li><a class="btn btn-default" href="#" data-filter=".joomla">Joomla</a></li>
      <li><a class="btn btn-default" href="#" data-filter=".megento">Megento</a></li>
    </ul>
    <!--/#portfolio-filter-->
    <div class="portfolio-items">
      <div class="col-sm-3 col-xs-12 portfolio-item html">
        <div class="view efffect">
          <div class="portfolio-image">
            <img src="images/our-team/bella.jpg" alt=""></div>
          <div class="mask text-center">
            <h3>Novel</h3>
            <h4>Lorem ipsum dolor sit amet consectetur</h4>
            <a href="#"><i class="fa fa-link"></i></a>
            <a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
          </div>
        </div>
      </div>
      <div class="col-sm-3 col-xs-12 portfolio-item jooma">
        <div class="view efffect">
          <div class="portfolio-image">
            <img src="images/our-team/constance.jpg" alt="">
          </div>
          <div class="mask text-center">
            <h3>Novel</h3>
            <h4>Lorem ipsum dolor sit amet consectetur</h4>
            <a href="#"><i class="fa fa-link"></i></a>
            <a href="images/portfolio/big-item4.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
          </div>
        </div>
      </div>
      <div class="col-sm-3 col-xs-12 portfolio-item wordpress">
        <div class="view efffect">
          <div class="portfolio-image">
            <img src="images/our-team/francell.jpg" alt="">
          </div>
          <div class="mask text-center">
            <h3>Novel</h3>
            <h4>Lorem ipsum dolor sit amet consectetur</h4>
            <a href="#"><i class="fa fa-link"></i></a>
            <a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
          </div>
        </div>
      </div>
      <div class="col-sm-3 col-xs-12 portfolio-item megento">
        <div class="view efffect">
          <div class="portfolio-image">
            <img src="images/portfolio/4.jpg" alt="">
          </div>
          <div class="mask text-center">
            <h3>Novel</h3>
            <h4>Lorem ipsum dolor sit amet consectetur</h4>
            <a href="#"><i class="fa fa-link"></i></a>
            <a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
          </div>
        </div>
      </div>
      <div class="col-sm-3 col-xs-12 portfolio-item html">
        <div class="view efffect">
          <div class="portfolio-image">
            <img src="images/portfolio/5.jpg" alt="">
          </div>
          <div class="mask text-center">
            <h3>Novel</h3>
            <h4>Lorem ipsum dolor sit amet consectetur</h4>
            <a href="#"><i class="fa fa-link"></i></a>
            <a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
          </div>
        </div>
      </div>
      <div class="col-sm-3 col-xs-12 portfolio-item wordpress">
        <div class="view efffect">
          <div class="portfolio-image">
            <img src="images/portfolio/6.jpg" alt="">
          </div>
          <div class="mask text-center">
            <h3>Novel</h3>
            <h4>Lorem ipsum dolor sit amet consectetur</h4>
            <a href="#"><i class="fa fa-link"></i></a>
            <a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
          </div>
        </div>
      </div>
      <div class="col-sm-3 col-xs-12 portfolio-item html">
        <div class="view efffect">
          <div class="portfolio-image">
            <img src="images/portfolio/7.jpg" alt="">
          </div>
          <div class="mask text-center">
            <h3>Novel</h3>
            <h4>Lorem ipsum dolor sit amet consectetur</h4>
            <a href="#"><i class="fa fa-link"></i></a>
            <a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
          </div>
        </div>
      </div>
      <div class="col-sm-3 col-xs-12 portfolio-item joomla">
        <div class="view efffect">
          <div class="portfolio-image">
            <img src="images/portfolio/8.jpg" alt=""></div>
          <div class="mask text-center">
            <h3>Novel</h3>
            <h4>Lorem ipsum dolor sit amet consectetur</h4>
            <a href="#"><i class="fa fa-link"></i></a>
            <a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
          </div>
        </div>
      </div>
      <div class="col-sm-3 col-xs-12 portfolio-item html">
        <div class="view efffect">
          <div class="portfolio-image">
            <img src="images/portfolio/9.jpg" alt="">
          </div>
          <div class="mask text-center">
            <h3>Novel</h3>
            <h4>Lorem ipsum dolor sit amet consectetur</h4>
            <a href="#"><i class="fa fa-link"></i></a>
            <a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
          </div>
        </div>
      </div>
      <div class="col-sm-3 col-xs-12 portfolio-item wordpress">
        <div class="view efffect">
          <div class="portfolio-image">
            <img src="images/portfolio/10.jpg" alt=""></div>
          <div class="mask text-center">
            <h3>Novel</h3>
            <h4>Lorem ipsum dolor sit amet consectetur</h4>
            <a href="#"><i class="fa fa-link"></i></a>
            <a href="images/portfolio/big-item.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
          </div>
        </div>
      </div>
      <div class="col-sm-3 col-xs-12 portfolio-item joomla">
        <div class="view efffect">
          <div class="portfolio-image">
            <img src="images/portfolio/11.jpg" alt=""></div>
          <div class="mask text-center">
            <h3>Novel</h3>
            <h4>Lorem ipsum dolor sit amet consectetur</h4>
            <a href="#"><i class="fa fa-link"></i></a>
            <a href="images/portfolio/big-item3.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
          </div>
        </div>
      </div>
      <div class="col-sm-3 col-xs-12 portfolio-item megento">
        <div class="view efffect">
          <div class="portfolio-image">
            <img src="images/portfolio/12.jpg" alt=""></div>
          <div class="mask text-center">
            <h3>Novel</h3>
            <h4>Lorem ipsum dolor sit amet consectetur</h4>
            <a href="#"><i class="fa fa-link"></i></a>
            <a href="images/portfolio/big-item4.jpg" data-gallery="prettyPhoto"><i class="fa fa-search-plus"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>

</section>
<!--/#portfolio-->

＆＃13;

隐藏div，直到它的数据过滤器选中它

2 个答案: