我的搜索已经用完了，所以我决定在这里问一下。 我想用这样的东西： - http://codepen.io/desandro/pen/owAyG/
可以使用两个过滤器的同位素（？） 例如： 1组A组，B组，C组 2红色，绿色，黄色 用户可以点击＆＃34; A组＆＃34;和＆＃34; Green＆＃34;，在A组中搜索绿色
但是，同位素需要支付商业用途。 我可以知道免费替代方案吗？ 我找不到任何东西。 或者有人可以通过https://razorjack.net/quicksand/进行修改？
谢谢。
var filterFns = {
greaterThan50: function() {
var number = $(this).find('.number').text();
return parseInt( number, 10 ) > 50;
},
even: function() {
var number = $(this).find('.number').text();
return parseInt( number, 10 ) % 2 === 0;
}
};
var filters = {};
var $grid = $('.grid').isotope({
itemSelector: '.color-shape',
filter: function() {
var isMatched = true;
var $this = $(this);
for ( var prop in filters ) {
var filter = filters[ prop ];
filter = filterFns[ filter ] || filter;
if ( filter ) {
isMatched = isMatched && $(this).is( filter );
}
if ( !isMatched ) {
break;
}
}
return isMatched;
}
});
$('#filters').on( 'click', '.button', function() {
var $this = $(this);
var $buttonGroup = $this.parents('.button-group');
var filterGroup = $buttonGroup.attr('data-filter-group');
filters[ filterGroup ] = $this.attr('data-filter');
$grid.isotope();
});
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});
答案 0 :(得分：0)
我尝试制作类似于同位素的内容。请仔细查看它并让我知道它是否适合您。您所要做的就是将内容复制粘贴到文本编辑器中并另存为html。< / p> 希望它对你有所帮助。
<pre>
</!DOCTYPE html>
<html>
<head>
<title>isotope_self</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
.grid{
border: 1px solid black;
overflow: hidden;
}`enter code here`
.grid:after {
content: '';
display: block;
clear: both;
}
.element-item
{
width: 100px;
height: 100px;
margin:10px 10px;
padding: 10px;
float: left;
position: relative;
}
.element-item .name
{
left: 10px;
top: 64px;
position:absolute;
text-transform:none;
letter-spacing: 0;
font-size: 18px;
font-weight: normal;
}
.element-item .symbol
{
color: white;
position: absolute;
top: 0;
font-size: 50px;
font-weight: bold;
}
.element-item .number {
position: absolute;
right: 8px;
top: 5px;
}
.element-item .weight {
position: absolute;
left: 10px;
top: 80px;
font-size: 18px;
}
.one
{
background-color: yellow;
}
.two
{
background-color: green;
}
.three
{
background-color: blue;
}
#btnbox
{
border: 1px solid red;
width: auto;
height: 120px;
}
#btnbox button{
float: left;
height: 50px;
width: 100px;
line-height: 35px;
}
</style>
<body>
<div id="btnbox">
<button id="btn1">one</button>
<button id="btn2">two</button>
<button id="btn3">three</button>
<button id="btn4">All</button>
<button id="btn5">number>50</button>
<button id="btn6">weight>250</button>
</div>
<div class="grid">
<div class="element-item one " data-category="one">
<h3 class="name">Mercury</h3>
<p class="symbol">Hg</p>
<p class="number">20</p>
<p class="weight">100</p>
</div>
<div class="element-item two " data-category="two">
<h3 class="name">zinc</h3>
<p class="symbol">Hg</p>
<p class="number">40</p>
<p class="weight">200</p>
</div>
<div class="element-item two " data-category="two">
<h3 class="name">clorine</h3>
<p class="symbol">Hg</p>
<p class="number">70</p>
<p class="weight">300</p>
</div>
<div class="element-item three " data-category="three">
<h3 class="name">iodine</h3>
<p class="symbol">Hg</p>
<p class="number">80</p>
<p class="weight">350</p>
</div>
<div class="element-item one " data-category="one">
<h3 class="name">sulphus</h3>
<p class="symbol">Hg</p>
<p class="number">60</p>
<p class="weight">250</p>
</div>
<div class="element-item one " data-category="one">
<h3 class="name">sodium</h3>
<p class="symbol">Hg</p>
<p class="number">70</p>
<p class="weight">550</p>
</div>
<div class="element-item two " data-category="two">
<h3 class="name">phosphorus</h3>
<p class="symbol">Hg</p>
<p class="number">20</p>
<p class="weight">650</p>
</div>
<div class="element-item three " data-category="three">
<h3 class="name">iodine</h3>
<p class="symbol">Hg</p>
<p class="number">40</p>
<p class="weight">600</p>
</div>
<div class="element-item two " data-category="two">
<h3 class="name">magneese</h3>
<p class="symbol">Hg</p>
<p class="number">60</p>
<p class="weight">500</p>
</div>
<div class="element-item one " data-category="one">
<h3 class="name">br</h3>
<p class="symbol">Hg</p>
<p class="number">60</p>
<p class="weight">650</p>
</div>
<div class="element-item three " data-category="three">
<h3 class="name">gold</h3>
<p class="symbol">Hg</p>
<p class="number">80</p>
<p class="weight">450</p>
</div>
<div class="element-item three " data-category="three">
<h3 class="name">Mercury</h3>
<p class="symbol">Hg</p>
<p class="number">70</p>
<p class="weight">400</p>
</div>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#btn1").click(function()
{
$(".one").fadeOut(500);
});
$("#btn2").click(function()
{
$(".two").fadeOut(500);
});
$("#btn3").click(function()
{
$(".three").fadeOut(500);
});
$("#btn4").click(function()
{
$(".grid").slideUp();
});
/*var filterFns = {
// show if number is greater than 50
numberGreaterThan50: function( itemElem ) {
var number = itemElem.querySelector('.number').textContent;
return parseInt( number, 10 ) > 50;
},*/
$("#btn5").click(function()
{
$(".element-item").each(function()
{
var num=parseInt($(this).find(".number").text()) > 50;
if(!num){
// This is .element-item div with number greater Than 50!
// Try to alert its name
//alert($(this).find(".name").html());
//document.getElementById('demo').innerHTML=$(this).find(".name").text();
/*$(".element-item").each(function()
{
if(parseInt($(this).find(".number").text()) !=50){
$(this).fadeOut();
}
})*/
$(this).fadeOut();
}
});
});
$("#btn6").click(function()
{
$(".element-item").each(function()
{
var num1=parseInt($(this).find(".weight").text()) > 200;
if(!num1){
$(this).fadeOut();
}
});
});
});
</script>
<p id="demo"></p>
</body>
</html>
</pre>