我实现了同位素的基本用法，因为它非常全面，我只想要“流沙式”漂亮的过滤动画效果。唯一起作用的是加载所有项目的*（全部）过滤器 - 单击任何其他过滤器链接项目什么都不显示？
我正在使用，XHTML Strict，jQuery 1.8.3 - 我也有 jQuery UI 1.10.3 并在我的投资组合中的图像项目上使用漂亮的照片，但是即使我从图像中完全删除漂亮的照片，行为仍然是相同的，没有过滤器.
我在网上看到的所有示例（包括 Isotope 网站）都使用 HTML5，这是它唯一的工作方式吗？我正在尝试同位素，因为 jQ Quicksand 浪费时间使用 prettyphoto，在其他论坛上都有很好的记录，因为流沙开发者并没有说太多，prettyphoto 开发者也没有说太多 - 但是至少流沙确实过滤了它，只是不能很好地与 prettyphoto 配合使用。基本上，我如何获得同位素以进行过滤的任何想法-不需要其他任何花哨的东西-这就是我得到的：
[页面头中的js]
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="_layout/js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="_layout/js/accordion/jquery.accordion.js" type="text/javascript"></script>
<script type="text/javascript" src="_layout/js/tweet/jquery.tweetable.min.js"></script>
<link href="_layout/js/isotope/css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="_layout/js/isotope/js/jquery.isotope.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
var $container = $('#portfolio');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
$('#filter li a').click(function(){
$('#filter li a.current').removeClass('current');
$(this).addClass('current');
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
return false;
});
});
</script>
[CSS]
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
.isotope,
.isotope .isotope-item {
/* change duration value to whatever you like */
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
transition-property: transform, opacity;
}
[html 标记 - 为简洁起见简化为 2 个类别]
<!-- isotope filter -->
<ul id="filter">
<li><a href="#" data-filter="*" class="current">All</a></li>
<li><a href="#" data-filter=".artstart">art projects</a></li>
<li><a href="#" data-filter=".iconstart">icon projects</a></li>
</ul>
<div id="portfolio">
<div id="0" class="picbox artstart">
<div class="fixed portfolio-item-preview">
<img src="pfimgs/2013/timeteam.png" width="200" height="123" alt="" />
<div class="preview-options">
<a href="pfimgs/2013/timeteampromo.png" class="lightbox" title="view large version" rel="prettyPhoto" >view large version</a>
<a href="#" class="view" title="Go to project page" >Go to project page</a>
</div>
</div>
</div>
<div id="1" class="picbox iconstart">
<div class="fixed portfolio-item-preview">
<<img src="pfimgs/2013/bonecollector.png" width="200" height="123" alt="" />
<div class="preview-options">
<a href="pfimgs/2013/bcollectorpromo.png" class="lightbox" title="view large version" rel="prettyPhoto" >view large version</a>
<a href="#" class="view" title="Go to project page" >Go to project page</a>
</div>
</div>
</div>
<div id="2" class="picbox artstart">
<div class="fixed portfolio-item-preview">
<img src="_layout/portfolio/mashup55.png" width="200" height="123" alt="" />
<div class="preview-options">
<a href="_layout/portfolio/mashuppromo.png" class="lightbox" title="View large version" rel="prettyPhoto" >View large version</a>
<a href="#" class="view" title="Go to project page" >Go to project page</a>
</div>
</div>
</div>
<div id="3" class="picbox iconstart">
<div class="fixed portfolio-item-preview">
<img src="_layout/portfolio/whatnext.png" width="200" height="123" alt="" />
<div class="preview-options">
<a href="_layout/portfolio/whatnextpromo.png" class="lightbox" title="View large version" rel="prettyPhoto" >View large version</a>
<a href="#" class="view" title="Go to project page" >Go to project page</a>
</div>
</div>
</div>
</div>
大家有什么想法吗？