【发布时间】：2016-08-18 13:26:03
【问题描述】：
所以我正在尝试使用 jquery 插件 Isotope 过滤图片库，但由于某种原因，我无法终生进行实际的过滤工作，任何人都可以看到我做错了什么。我添加了两个类“过渡”和“金属”，并尝试使用顶部的按钮来过滤每个具有这些类之一的图像。
<!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>
非常感谢一些帮助:)
【问题讨论】：
标签： jquery filtering jquery-masonry jquery-isotope