带砌体的同位素网格过滤

Question

所以我正在尝试使用 jquery 插件 Isotope 过滤图片库，但出于某种原因我无法让实际的过滤工作，但任何人都可以看到我的东西吗做错了我添加了两个类 "transition" 和 "metal" 并尝试使用顶部的按钮来过滤图像，每个图像都有一个类.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title>Bootstrap 101 Template</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
</head>
<body>

    <div class="button-group filter-button-group">
  <button data-filter="*">show all</button>
  <button data-filter=".metal">metal</button>
  <button data-filter=".transition">transition</button>
</div>
    <div style="padding:50px;">        
<h1>Photography</h1>
<p>This is an assortment of photographs I have taken.</p>
    </div>




    <div class="container-fluid">
        <div class="grid">
            <div class="grid-sizer col-xs-6 col-sm-4 col-md-3 col-lg-2"></div>

            <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 transition" data-category="transition">
                <div class="grid-item-content">
                    <img class="img-responsive" src="images/file0001079221497.jpg">
                </div>
            </div>
            <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 transition" data-category="transition">
                <div class="grid-item-content">
                    <img class="img-responsive" src="images/file0001116000079.jpg">
                </div>
            </div>
            <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal">
                <div class="grid-item-content">
                    <img class="img-responsive" src="images/file0001141038889.jpg">
                </div>
            </div>
            <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal">
                <div class="grid-item-content">
                    <img class="img-responsive" src="images/file0001176452626.jpg">
                </div>
            </div>
            <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 transition" data-category="transition">
                <div class="grid-item-content">
                    <img class="img-responsive" src="images/file0001209214386.jpg">
                </div>
            </div>
            <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal">
                <div class="grid-item-content">
                    <img class="img-responsive" src="images/file0001224117612.jpg">
                </div>
            </div>
            <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal">
                <div class="grid-item-content">
                    <img class="img-responsive" src="images/file0001316404158.jpg">
                </div>
            </div>
            <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal">
                <div class="grid-item-content">
                    <img class="img-responsive" src="images/file000132701536.jpg">
                </div>
            </div>
            <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 transition" data-category="transition">
                <div class="grid-item-content">
                    <img class="img-responsive" src="images/file0001376718168.jpg">
                </div>
            </div>
            <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal">
                <div class="grid-item-content">
                    <img class="img-responsive" src="images/file0001454659375.jpg">
                </div>
            </div>
            <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 transition" data-category="transition">
                <div class="grid-item-content">
                    <img class="img-responsive" src="images/file0001545806234.jpg">
                </div>
            </div>
            <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal">
                <div class="grid-item-content">
                    <img class="img-responsive" src="images/file0001565782100.jpg">
                </div>
            </div>
            <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal">
                <div class="grid-item-content">
                    <img class="img-responsive" src="images/file0001601969844.jpg">
                </div>
            </div>
            <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal">
                <div class="grid-item-content">
                    <img class="img-responsive" src="images/file0001608482449.jpg">
                </div>
            </div>
            <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal">
                <div class="grid-item-content">
                    <img class="img-responsive" src="images/file0001625591306.jpg">
                </div>
            </div>
            <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal">
                <div class="grid-item-content">
                    <img class="img-responsive" src="images/file0001637922945.jpg">
                </div>
            </div>
            <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal">
                <div class="grid-item-content">
                    <img class="img-responsive" src="images/file0001706961259.jpg">
                </div>
            </div>
            <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 transition" data-category="transition">
                <div class="grid-item-content">
                    <img class="img-responsive" src="images/file0001735386118.jpg">
                </div>
            </div>
            <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal">
                <div class="grid-item-content">
                    <img class="img-responsive" src="images/file0001750264747.jpg">
                </div>
            </div>
            <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal">
                <div class="grid-item-content">
                    <img class="img-responsive" src="images/file0001792779106.jpg">
                </div>
            </div>
            <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 transition" data-category="transition">
                <div class="grid-item-content">
                    <img class="img-responsive" src="images/file0001817248786.jpg">
                </div>
            </div>
            <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 transition" data-category="transition">
                <div class="grid-item-content">
                    <img class="img-responsive" src="images/file0001896291699.jpg">
                </div>
            </div>
            <div class="grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2 metal" data-category="metal">
                <div class="grid-item-content">
                    <img class="img-responsive" src="images/file0001958769599.jpg">
                </div>
            </div>
        </div>
    </div>
            <div class="parallax-window" id="contact" class="parallax-window" data-parallax="scroll" data-image-src="images/nyc-1.jpg">
    </div>
    <div class="parallax-window" id="contact" class="parallax-window" data-parallax="scroll" data-image-src="images/nyc-2.jpg">
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <script src="js/isotope.pkgd.min.js"></script>
    <script src="js/parallax.min.js"></script>
    <script>
    $('.grid').isotope({
  itemSelector: '.grid-item',
  percentPosition: true,
  masonry: {
    columnWidth: '.grid-sizer'
  }
});
        $('.filter-button-group').on( 'click', 'button', function() {
  var filterValue = $(this).attr('data-filter');
  $grid.isotope({ filter: filterValue });
});




</script>
</body>
</html>

非常感谢您的帮助:)

Answer 1

没有 link 或 jsfiddle 很难知道，但有一件事是你没有声明变量 $grid。在不声明变量的情况下尝试此操作，如您的代码所示：

$('.filter-button-group').on( 'click', 'button', function() {
var filterValue = $(this).attr('data-filter');
$('.grid').isotope({ filter: filterValue });
});

或声明如下：

var $grid = $('.grid');
$grid.isotope({
itemSelector: '.grid-item',
percentPosition: true,
masonry: {
columnWidth: '.grid-sizer'
 }
});
    $('.filter-button-group').on( 'click', 'button', function() {
var filterValue = $(this).attr('data-filter');
$grid.isotope({ filter: filterValue });
});

带砌体的同位素网格过滤

isotope grid filtering with masonry

jquery

filtering

jquery-masonry

jquery-isotope