我实现了同位素的基本用法，因为它非常全面，我只想要"流沙般"的过滤动画效果。唯一有效的是加载所有项目的*（all）过滤器-单击任何其他过滤器链接项目都不会显示任何内容？
我使用XHTML Strict，jQuery 1.8.3-我也有jQuery UI 1.10.3，并在我的公文包中的图像项目上使用漂亮的照片，然而，即使我从图像中完全删除了prettypoto，行为仍然是一样的，没有任何过滤器。
我在网上看到的所有例子（包括同位素网站）都使用HTML5，这是它唯一的工作方式吗？？我之所以尝试同位素，是因为jQ流沙在使用prettypoto时浪费了时间，其他论坛上也有充分的证据表明它是不可操作的——流沙开发人员也没有说太多prettypeto开发人员的话——但至少流沙确实过滤了它，只是它在使用pretTypoto方面不太好。任何关于我如何让同位素基本上过滤的想法-不需要其他花哨的东西-我得到的是：
[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>
[the-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>
知道这里发生了什么吗，伙计们？？
修复了它，忘记添加"itemSelector"