isotope usages

// isotope active js

        jQuery(document).ready(function () {
            var jQuerycontainer = jQuery('.all_project'); // this all items wrapper
            jQuerycontainer.imagesLoaded(function () {
                jQuerycontainer.isotope({
                    itemSelector: '.single_all_project', // this is single portfolio
                    layoutMode: 'fitRows'
                });
            });

            jQuery('ul.filter_option li').click(function () {

                jQuery('ul.filter_option li').removeClass('active');
                jQuery(this).addClass('active');

                var selector = jQuery(this).attr('data-filter');
                jQuerycontainer.isotope({
                    filter: selector
                });

                return false;
            });




// isotop markup
                <div class="col-md-12">
                    <div class="total_awesome_project">
                        <div class="project_filter text-center text-uppercase">
                            <ul class="filter_option nav">
                                <li class="active" data-filter="*">all</li>
                                <li data-filter=".webdesign">webdesign</li>
                                <li data-filter=".graphic">graphic</li>
                                <li data-filter=".photography">photography</li>
                                <li data-filter=".motion-video">motion video</li>
                            </ul>
                        </div>
                        <div class="all_project">
                            <div class="single_project_wrapper">
                                <div class="single_all_project webdesign motion-video">
                                    <img src="http://placehold.it/285x220" alt="" />
                                </div>
                            </div>
                            <div class="single_project_wrapper">
                                <div class="single_all_project photography">
                                    <img src="http://placehold.it/285x220" alt="" />
                                </div>
                            </div>
                            <div class="single_project_wrapper">
                                <div class="single_all_project webdesign">
                                    <img src="http://placehold.it/285x220" alt="" />
                                </div>
                            </div>
                            <div class="single_project_wrapper">
                                <div class="single_all_project photography motion-video">
                                    <img src="http://placehold.it/285x220" alt="" />
                                </div>
                            </div>
                            <div class="single_project_wrapper">
                                <div class="single_all_project webdesign">
                                    <img src="http://placehold.it/285x220" alt="" />
                                </div>
                            </div>
                            <div class="single_project_wrapper">
                                <div class="single_all_project graphic photography">
                                    <img src="http://placehold.it/285x220" alt="" />
                                </div>
                            </div>
                            <div class="single_project_wrapper">
                                <div class="single_all_project webdesign motion-video">
                                    <img src="http://placehold.it/285x220" alt="" />
                                </div>
                            </div>
                            <div class="single_project_wrapper">
                                <div class="single_all_project graphic photography">
                                    <img src="http://placehold.it/285x220" alt="" />
                                </div>
                            </div>
                            <div class="single_project_wrapper">
                                <div class="single_all_project motion-video">
                                    <img src="http://placehold.it/285x220" alt="" />
                                </div>
                            </div>
                            <div class="single_project_wrapper">
                                <div class="single_all_project graphic">
                                    <img src="http://placehold.it/285x220" alt="" />
                                </div>
                            </div>
                            <div class="single_project_wrapper">
                                <div class="single_all_project">
                                    <img src="http://placehold.it/285x220" alt="" />
                                </div>
                            </div>
                            <div class="single_project_wrapper">
                                <div class="single_all_project graphic">
                                    <img src="http://placehold.it/285x220" alt="" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>



// isotope css

.project_filter{margin-bottom:25px;}
.project_filter ul.filter_option{}
.project_filter ul.filter_option li.active{color:#549dc5;}
.project_filter ul.filter_option li{display:inline-block;color:#2e2e2e;font-size:16px;cursor:pointer;}
.project_filter ul.filter_option li.active:after{}
.project_filter ul.filter_option li:after{content:"/";padding:10px;color: #B4B4B4}
.project_filter ul.filter_option li:last-child:after{display:none;}

.all_project{margin-left:-10px;}
.single_project_wrapper{}
.single_all_project{float:left;margin-bottom:10px;margin-left: 10px;}
.single_all_project img{width: 277px;}