同位素分选
提问于 2014-01-18 08:30:50
我有一个带有同位素插件的jsfiddle，我正在尝试添加排序功能，这样当您单击排序链接时，具有该类的元素将被带到顶部，但其他元素不会被隐藏。
有人知道如何添加排序代码吗？
$(document).ready(function () {
var classes = ["width2", "height2", "width2height2", ];
var $container = $('#container');
// add randomish size classes
$container.find('.element').each(function () {
$(this).addClass(classes[~~ (Math.random() * classes.length)]);
});
});
$(document).ready(function () {
var $container = $('#container');
$container.isotope({
itemSelector: '.element',
masonry: {
columnWidth: 120
}
});
});
回答 1
Stack Overflow用户
发布于 2014-01-21 10:24:47
您可以这样做(未经验证)
<div class="element car" data-category="ferarri"> 在你的代码中
...
getSortData : {
category : function ( $elem ) {
//Returns 1 for when it matches, 0 otherwise
return $elem.attr('data-category')==($('#sorts .selected').html());
}
}
$('#sorts a').click(function(){
var sortName = $(this).html(); //e.g. 'Ferarri'
$('#container').isotope({ sortBy : 'category'});
return false;
});其他一些注意事项
- 不需要(也就是不应该)向你的HTML标记中的每个元素添加“同位素项目”类。在一些更复杂的场景中(延迟加载等)，它会导致问题。
- 我不认为你的嵌套div会在一个单一的同位素容器中工作。(我可能错了)--我不确定在应用了上面的方法后，你是否还需要它们。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21201861
复制相关文章
点击加载更多
腾讯云开发者
