<section class="sec-pad gallery-page-one gallery-style-two">

    <div class="thm-container">

        

        <div class="gallery-filter">

            <ul class="post-filter masonary text-center">

                <li class="filter active" data-filter=".masonary-item"><span>All</span></li>

                <li class="filter " data-filter=".spa"><span>Spa</span></li>

                <li class="filter " data-filter=".rooms"><span>Rooms</span></li>

                <li class="filter " data-filter=".wedding"><span>Wedding</span></li>

                <li class="filter " data-filter=".activities"><span>Activities</span></li>

                <li class="filter " data-filter=".restaurant"><span>Restaurant</span></li>

                <li class="filter " data-filter=".pool"><span>Pool</span></li>

            </ul><!-- /.post-filter -->

        </div><!-- /.gallery-filter -->

        

        

        <div class="row masonary-layout filter-layout" data-filter-class="filter">

            

            <div class="col-md-4 col-sm-6 col-xs-12 masonary-item single-filter-item spa rooms">

                <div class="single-gallery-style-two">

                    <div class="img-box">

                        <img src="img/gallery-p-1-1.jpg" alt="Awesome Image"/>

                        <div class="overlay">

                            <div class="box">

                                <div class="content">

                                    <a href="#"><h3>Activities</h3></a>

                                    <a href="img/gallery-p-1-1.jpg" class="icon icon-FullScreen img-popup"></a>

                                </div><!-- /.content -->

                            </div><!-- /.box -->

                        </div><!-- /.overlay -->

                    </div><!-- /.img-box -->

                </div><!-- /.single-gallery-style-two -->

            </div><!-- /.single-filter-item -->

                        

            

            <div class="col-md-4 col-sm-6 col-xs-12 masonary-item single-filter-item activities wedding">

                <div class="single-gallery-style-two">

                    <div class="img-box">

                        <img src="img/gallery-p-1-4.jpg" alt="Awesome Image"/>

                        <div class="overlay">

                            <div class="box">

                                <div class="content">

                                    <a href="#"><h3>Activities</h3></a>

                                    <a href="img/gallery-p-1-4.jpg" class="icon icon-FullScreen img-popup"></a>

                                </div><!-- /.content -->

                            </div><!-- /.box -->

                        </div><!-- /.overlay -->

                    </div><!-- /.img-box -->

                </div><!-- /.single-gallery-style-two -->

            </div><!-- /.single-filter-item -->

            

                    

            <div class="col-md-4 col-sm-6 col-xs-12 masonary-item single-filter-item rooms">

                <div class="single-gallery-style-two">

                    <div class="img-box">

                        <img src="img/gallery-p-1-7.jpg" alt="Awesome Image"/>

                        <div class="overlay">

                            <div class="box">

                                <div class="content">

                                    <a href="#"><h3>Activities</h3></a>

                                    <a href="img/gallery-p-1-7.jpg" class="icon icon-FullScreen img-popup"></a>

                                </div><!-- /.content -->

                            </div><!-- /.box -->

                        </div><!-- /.overlay -->

                    </div><!-- /.img-box -->

                </div><!-- /.single-gallery-style-two -->

            </div><!-- /.single-filter-item -->

            

            

            <div class="col-md-4 col-sm-6 col-xs-12 masonary-item single-filter-item rooms">

                <div class="single-gallery-style-two">

                    <div class="img-box">

                        <img src="img/gallery-p-1-8.jpg" alt="Awesome Image"/>

                        <div class="overlay">

                            <div class="box">

                                <div class="content">

                                    <a href="#"><h3>Activities</h3></a>

                                    <a href="img/gallery-p-1-8.jpg" class="icon icon-FullScreen img-popup"></a>

                                </div><!-- /.content -->

                            </div><!-- /.box -->

                        </div><!-- /.overlay -->

                    </div><!-- /.img-box -->

                </div><!-- /.single-gallery-style-two -->

            </div><!-- /.single-filter-item -->

            

            

        </div>

    </div><!-- /.thm-container -->

</section><!-- /.sec-pad -->

function galleryMasonaryLayout() {

    if ($('.masonary-layout').length) {

        $('.masonary-layout').isotope({

            layoutMode: 'masonry'

        });

    }

 

    if ($('.post-filter').length) {

        $('.post-filter li').children('span').on('click', function() {

            var Self = $(this);

            var selector = Self.parent().attr('data-filter');

            var postFilterLi = $('.post-filter li');

            postFilterLi.children('span').parent().removeClass('active');

            Self.parent().addClass('active');

 

 

            $('.filter-layout').isotope({

                filter: selector,

                animationOptions: {

                    duration: 500,

                    easing: 'linear',

                    queue: false

                }

            });

            return false;

        });

    }

 

    if ($('.post-filter.has-dynamic-filter-counter').length) {

        // var allItem = $('.single-filter-item').length;

 

        var activeFilterItem = $('.post-filter.has-dynamic-filter-counter').find('li');

 

        activeFilterItem.each(function() {

            var filterElement = $(this).data('filter');

            var count = $('.gallery-content').find(filterElement).length;

 

            $(this).children('span').append('<span class="count"><b>' + count + '</b></span>');

        });

    };

}

$('.filter-layout').isotope({filter: '.spa'});

<li class="filter " data-filter=".spa"><span>Spa</span></li>