Filterizr image sorting Plugin implementation ( Source code )

Filterizr image sorting Plugin implementation ( Source code )

Download the plugin first and add the js file and the following cdn as well

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="jquery.filterizr.min.js"></script>

HTML

<div class="container">
        <div class="col-md-12 col-xs-12">
            <ul>
<li data-filter="all"> All</li>
<li data-filter="1"> Web</li>
<li data-filter="2"> Graphics</li>
<li data-filter="3"> Marketing </li>
</ul>
<div class="filtr-container">
                    <div class="col-md-4 filtr-item" data-category="1" data-sort="value">
                       <img src="https://i.postimg.cc/mk6CWthT/1.jpg" alt="sample">
                    </div>
<div class="col-md-4 filtr-item" data-category="2, 1" data-sort="value">
                       <img src="https://i.postimg.cc/Cx8D9M0V/2.jpg" alt="sample">
                    </div>
<div class="col-md-4 filtr-item" data-category="1, 3, 4" data-sort="value">
                       <img src="https://i.postimg.cc/LX91qz1H/3.jpg" alt="sample">
                    </div>
<div class="col-md-4 filtr-item" data-category="2, 3" data-sort="value">
                       <img src="https://i.postimg.cc/MKMjjZvj/4.jpg" alt="sample">
                    </div>
<div class="col-md-4 filtr-item" data-category="3, 4, 1" data-sort="value">
                       <img src="https://i.postimg.cc/kgW6fjNJ/5.jpg" alt="sample">
                    </div>
<div class="col-md-4 filtr-item" data-category="4, 6, 5" data-sort="value">
                       <img src="https://i.postimg.cc/y8CWgFMw/6.jpg" alt="sample">
                    </div>
</div>
</div>
</div>