isotope javascript does not aligned properly

Question

Problem is Isotope doesn't display the grid correctly when the page loads, or even when you refresh it, however, once I sort items it fixes itself, also if I resize the window it seems to fix the issue too. here is a code that breaks.

This is a screen shot

    $("[data-fancybox]").fancybox();


    $(".items").isotope({
        filter: '*',
        animationOptions: {
            duration: 1500,
            easing: 'linear',
            queue: false
        }
    });

    $("#filters a").click(function () {

        $("#filters .current").removeClass("current");
        $(this).addClass("current");

        var selector = $(this).attr("data-filter");

        $(".items").isotope({
            filter: selector,
            animationOptions: {
                duration: 1500,
                easing: 'linear',
                queue: false
            }
        });

        return false;
    });

Above is my javasript code

Below is html

<div id="portfolio" class="section">
        <div class="container">
            <div class="row">
                <div class="heading">
                    <h2>PHOTOS</h2>
                </div>

                <div class="filter">
                    <ul id="filters">
                        <li><a href="#" data-filter="*" class="current">ALL</a></li>
                        <li><a href="#" data-filter=".TJ" >TJ</a></li>
                        <li><a href="#" data-filter=".sns">SNS posts</a></li>
                        <li><a href="#" data-filter=".etc">etc</a></li>
                    </ul>
                </div>

                <div class="itemsContainer">
                    <ul class="items">
                        <li class="TJ col-xs-6 col-sm-4 col-md-3 col-lg-3">
                            <div class="item">

                                <img src="img/portfolio/thumbnails/thumbnail1.jpg">

                                <div class="icons">
                                    <a href="img/portfolio/photo1.jpg" title="View image" class="openButton"
                                        data-fancybox data-caption="TJ">
                                        <i class="fa fa-search"></i>
                                    </a>

                                    <a href="" target="_blank" class="projectLink">
                                        <i class="fa fa-link"></i>
                                    </a>
                                </div>
                                <div class="imageOverlay"></div>
                            </div>
                        </li>

                        <li class="TJ col-xs-6 col-sm-4 col-md-3 col-lg-3">
                            <div class="item">

                                <img src="img/portfolio/thumbnails/thumbnail2.jpg">

                                <div class="icons">
                                    <a href="img/portfolio/photo2.jpg" title="View image" class="openButton"
                                        data-fancybox data-caption="TJ">
                                        <i class="fa fa-search"></i>
                                    </a>

                                    <a href="" target="_blank" class="projectLink">
                                        <i class="fa fa-link"></i>
                                    </a>
                                </div>
                                <div class="imageOverlay"></div>
                            </div>
                        </li>


                        <li class="TJ col-xs-6 col-sm-4 col-md-3 col-lg-3">
                            <div class="item">

                                <img src="img/portfolio/thumbnails/thumbnail3.jpeg">

                                <div class="icons">
                                    <a href="img/portfolio/photo3.jpg" title="View image" class="openButton"
                                        data-fancybox data-caption="TJ">
                                        <i class="fa fa-search"></i>
                                    </a>

                                    <a href="" target="_blank" class="projectLink">
                                        <i class="fa fa-link"></i>
                                    </a>
                                </div>
                                <div class="imageOverlay"></div>
                            </div>
                        </li>

                        <li class="TJ col-xs-6 col-sm-4 col-md-3 col-lg-3">
                            <div class="item">

                                <img src="img/portfolio/thumbnails/thumbnail4.png">

                                <div class="icons">
                                    <a href="img/portfolio/photo4.PNG" title="View image" class="openButton"
                                        data-fancybox data-caption="TJ">
                                        <i class="fa fa-search"></i>
                                    </a>

                                    <a href="" target="_blank" class="projectLink">
                                        <i class="fa fa-link"></i>
                                    </a>
                                </div>
                                <div class="imageOverlay"></div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

It should display 4 phots in a row and I have like 5 rows +