如何以有效的方式过滤砌体画廊中的DIV？我如何使用纯jQuery进行过滤？

Question

我想建立一个画廊，我想放置的所有照片，CSS3，HTML5，jQuery代码片段等想知道做过滤部分使用纯jQuery的？这里是我的代码：

 <!-- Filter Starts --> 
    <div class="container"> 
     <div class="row safezone"> 
     <ul class="filters"> 
      <li><a href="#" title="All">All</a></li> 
      <li><a href="#" title="CSS3">CSS3</a></li> 
      <li><a href="#" title="jQuery">jQuery</a></li> 
      <li><a href="#" title="Mobile">Mobile</a></li> 
      <li><a href="#" title="Photos">Photos</a></li> 
      <li><a href="#" title="UI">User Interfaces</a></li> 
      <li><a href="#" title="Wireframes">Wireframes</a></li> 
      <li><a href="#" title="Others">Others</a></li>   
     </ul> 
     </div> 
    </div> 
    <!-- Filter Ends --> 

<div class="container"> 
    <div class="row"> 
    <!-- gal cont--> 
    <div id="masonry"> 
    <div class="mitem"> 
     <h3>CSS3 Animation</h3> 
     <p>Text underline animation on mouse hover.</p> 
     <p class="textanim">“<a href="javascript:void();"><strong>True love is born</strong></a> from understanding.”</p> 
    </div> 
    <div class="mitem box"> 
     <h3>CSS3 Circles</h3> 
     <div class="circle-text"><p>Circles with pure CSS3</p></div> 
    </div> 
    <div class="mitem box">jQuery</div> 
    <div class="mitem box">Mobile</div> 
    <div class="mitem box">jQuery</div> 
    <div class="mitem box">Wireframes</div> 
    <div class="mitem box">Other</div> 
    <div class="mitem box">UI</div> 
    <div class="mitem box">UI</div> 

    <div class="mitem box"><img class="img-responsive img-thumbnail" src="http://lorempixel.com/400/200/sports" /></div> 
    <div class="mitem box"><img class="img-responsive img-thumbnail" src="http://lorempixel.com/400/200/sports/Dummy-Text" /></div>  
    <div class="mitem box"><img class="img-responsive img-thumbnail" src="http://lorempixel.com/400/200" /></div>  


</div> 
    <!-- /gal cont --> 
    </div> 
</div> 



var container = document.querySelector('#masonry'); 
var msnry = new Masonry(container, { 
    columnWidth: 220, 
    itemSelector: '.mitem' 
}); 



@import url('https://fonts.googleapis.com/css?family=Cinzel:400,700,900|Satisfy'); 
@import url('http://fonts.googleapis.com/css?family=Roboto+Slab:400,700,100%7CRoboto:400,700,300,100'); 

/* Syntaxes for quick reference 
transition: <property> <duration> <timing-function> <delay>; 

=============================== */ 

/** Basic Page CSS **/ 
body { 
    font-family: 'Roboto Slab', serif; 
    font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-weight: 300; 
    font-size: 2em; 
} 
body.playground { background-color: #EAEDF1; } 

h1, h2, h3, h4, h5, h6 { 
    font-family: 'Cinzel', serif, sans-serif; 
    font-weight: 400; 
    margin: 0; 
} 
.safezone { padding-top: 80px; } 
.borders { border:1px solid red; } 

/* Masonry */ 
.mitem { 
    width: 200px; 
    float: left; 
    font-size: .85em; 
    background: #fff; 
    padding: 1em;  
    /*box-shadow: 1px 1px 2px 1px #e3e3e3;*/ 
    margin-bottom: 2em; 
    border-radius: 2px; 
} 
.mitem img { border:none; padding: 0; margin: 0; border-radius: 2px; } 
#masonry h3 { font-size: 0.9em; font-weight: 600; color: #2C77F8; text-align: center; border-bottom: 0px dotted #78A8FF; margin: 0 0 10px 0; } 
/* /Masonry */ 

/* CSS3 Circles */ 
.circle-text { 
    width:150px; 
} 
.circle-text:after { 
    content: ""; 
    display: block; 
    width: 100%; 
    height:0; 
    padding-bottom: 100%; 
    background: #4679BD; 
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    border-radius: 50%; 
    /*background-image: linear-gradient(to right bottom, #22B009 0%, #4679BD 100%);*/ 
    box-shadow: 3px 4px 3px #ccc; 
    background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%); 
} 
.circle-text p { 
    float:left; 
    width:100%; 
    padding-top:50%; 
    line-height:1em; 
    margin-top:-0.5em; 
    text-align:center; 
    color:white; 
} 
/* ===================== */ 

/* text underline animation on hover 
======================================*/ 
p.textanim > a { 
    position: relative; 
    color: #f00; 
    text-decoration: none; 
    } 

    p.textanim > a:hover { 
    color: #f00; 
    text-decoration: none; 
    } 
    p.textanim > a:before { 
    content: ""; 
    position: absolute; 
    width: 100%; 
    height: 2px; 
    bottom: 0; 
    left: 0; 
    background-color: #f00; 
    visibility: hidden; 
    -webkit-transform: scaleX(0); 
    transform: scaleX(0); 
    -webkit-transition: all 0.3s ease-in-out 0s; 
    transition: all 0.3s ease-in-out 0s; 
    } 
    p.textanim > a:hover:before { 
    visibility: visible; 
    -webkit-transform: scaleX(1); 
    transform: scaleX(1); 
    } 
/* ========================================== */ 


/* CSS3 Box enlarge on hover 
==============================*/ 
.box:hover { 
    box-shadow: 0 5px 10px rgba(0,0,0,0.2); 
    transform: scale(1); 
    border-radius: 4px; 
    color: #111; 
    transition: all 0.2s ease-in-out 0s; 
} 
/* =================================== */ 


/* Filters 
==============================*/ 
ul.filters { list-style: none; margin: 0 auto 2em auto; } 
ul.filters li { display: inline-block; border-right: 1px dotted #aaa; padding-right: 1em; margin-right: 1em; } 
ul.filters li:last-child { border-right: none; } 
ul.filters li a { text-decoration: none; font-size: 0.8em; padding: 5px 10px; border-radius: 20px; } 
ul.filters li a:hover { text-decoration: none; background-color: #0095DD; color: #fff; transition: all 0.2s ease-in-out 0s; } 
/* =================================== */ } 
} 
} 
} 

这里的链接的jsfiddle：https://jsfiddle.net/tosrisri/thqL2Lf1/2/

Answer 1

因为你是你的罚款使用插件，你可以只使用同位素砖石插件。它会处理你的安排和过滤。它是免费的，并有一些非常强大的过滤方法。

https://isotope.metafizzy.co/