Overlapping posts – Isotope, bootstrap and wordpress

I have searched the internet for almost 4 hours. And I cannot find a solution to my problem.

I have got the isotope to work with both bootstrap and wordpress. The thing is that my posts overlap eachother when I refresh my site. The solution to that should be: (window).load, or image load. But when I implement them to my code, the filtering function stops working ..

My site:
Heres my JS (when it works, but overlapping):

jQuery(document).ready(function ($) {

	var $container = $('#isotope-list'); //The ID for the list with all the blog posts

    $container.isotope({ //Isotope options, 'item' matches the class in the PHP
		itemSelector : '.item',
  		layoutMode : 'masonry',
	});

	//Add the class selected to the item that is clicked, and remove from the others
	var $optionSets = $('#filters'),
	$optionLinks = $optionSets.find('a');

	$optionLinks.click(function(){
	var $this = $(this);
	// don't proceed if already selected
	if ( $this.hasClass('selected') ) {
	  return false;
	}
	var $optionSet = $this.parents('#filters');
	$optionSets.find('.selected').removeClass('selected');
	$this.addClass('selected');

	//When an item is clicked, sort the items.
	 var selector = $(this).attr('data-filter');
	$container.isotope({ filter: selector });

	return false;
	});

});

Here is my mark up:

<div class="container-fluid articlewrapper">

        <section class="row">
            <div class="overskrift2 text-center">
                <h3>Seneste projekter</h3>
            </div>
        </section>

        <section class="row">
            <div class="col-lg-12 text-center">
                <ul id="filters">
                    <li><a href="#" data-filter="*" class="selected">Alle /</a></li>
                    <?php
                        $terms = get_terms("category"); // get all categories, but you can use any taxonomy
                        $count = count($terms); //How many are they?
                        if ( $count > 0 ){  //If there are more than 0 terms
                            foreach ( $terms as $term ) {  //for each term:
                                echo "<li><a href='#' data-filter='.".$term->slug."'>" . $term->name . " / " . "</a></li>\n";
                                //create a list item with the current term slug for sorting, and name for label
                            }
                        }
                    ?>
                </ul>
            </div>
        </section>

        <section class="row">

            <?php $the_query = new WP_Query( 'posts_per_page=8' ); //Check the WP_Query docs to see how you can limit which posts to display ?>

                <?php if ( $the_query->have_posts() ) : ?>

                <div id="isotope-list" id="container" >
                <?php while ( $the_query->have_posts() ) : $the_query->the_post();
                $termsArray = get_the_terms( $post->ID, "category" );  //Get the terms for this particular item
                $termsString = ""; //initialize the string that will contain the terms
                    foreach ( $termsArray as $term ) { // for each term
                        $termsString .= $term->slug.' '; //create a string that has all the slugs
                    }
                ?> 

                    <div class="<?php echo $termsString; ?> item col-xs-12 col-sm-4 col-md-3 col-lg-3" onclick="location.href='<?php the_permalink(); ?>';" style="cursor: pointer;"> <?php // 'item' is used as an identifier ?>
                        <div data-content="<?php the_title(); ?>" class="postthumbnail">
                            <?php if ( has_post_thumbnail() ) {
                                        $attributes = array('class' => 'post-thumbnails img-responsive');
                                        the_post_thumbnail('thumbs', $attributes);
                                } ?>
                        </div>
                    </div> <!-- end item -->

                <?php endwhile;  ?>
                </div> <!-- end isotope-list -->

                <?php endif; ?>
        </section>

        <section class="row">

            <div class="buttonPad">

                <div class="col-lg-4"></div>

                <div class="col-lg-4 text-center">
                    <a href="https://laerkelyhne.dk/portfolio/kontakt/" class="btn btn-success btn-lg button">Se mere</a>
                </div>

                <div class="col-lg-4"></div>

            </div>

        </section>
    </div>