isotope javascript does not aligned properly

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 +