Isotope jquery plugin 대체

검색이 부족하여 여기에서 질문하기로했습니다. 나는 이런 식으로 뭔가를 사용하려면 : - http://codepen.io/desandro/pen/owAyG/Isotope jquery plugin 대체

두 개의 필터 예를 들어 사용 할 수있는 동위 원소 : 1 그룹 A, 그룹 B 그룹 C를 2 빨강, 녹색, 노란색 (?) 사용자는 "그룹 A"와 "녹색"을 클릭하여 그룹 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'); 
     }); 
    });

출처

2016-08-12 demoncoder

나는 그것을에서 isotope..kindly 모습처럼 유사한 내용을 확인하고 당신이해야 할 쯤은 작동 텍스트 편집기의 내용을 붙여 복사하고 저장하는 경우 알려 주시기 위해 노력했다 html로.

희망은 도움이 되길 바랍니다.

<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>

출처

2016-08-12 17:34:23

와우! 감사! jsfiddle로 데모를 보시겠습니까? – demoncoder

답변

관련 문제