Infinite scroll & Isotope

Hello Team,

I tried everything, but with little success:

On my page is a list with tv productions. I use this code for initialization and add ing new item:

    var takePages = @take;

    $(document).ready(function(){

        const $container = $('#posts');
        var stopLoading = false;
        $("#footer").css("margin-top", 0);

        $($container).isotope();
        setTimeout( function(){
            $container.isotope('layout');
            SEMICOLON.initialize.resizeVideos();
            SEMICOLON.widget.loadFlexSlider();
            SEMICOLON.widget.masonryThumbs();
        }, 500 );

        $container.infiniteScroll({
            path: function() {
                const pageNumber = (this.loadCount + 1) * takePages;
                console.log("skip: " + pageNumber);
                var activeTag = $(".article-list #page-menu li.current").attr("data-tag");
                if (activeTag === undefined) activeTag = "";
                if(stopLoading) return null;
                return "@Url.Action("ArticleList", "Articles")" + "?skip=" + pageNumber + "&tag=" + activeTag;
            },
            history: false,
            checkLastPage: true
        });

        $container.on('load.infiniteScroll', function (event, response, path) {
            console.log(response);
            var $items = $(response).find('.entry');
            console.log("$items.length: " + $items.length);
            if ($items.length === 0) {
                stopLoading = true;
                return true;
            }
            // append items after images loaded
            $items.imagesLoaded(function () {
                $container.append( $items );
                $container.isotope( 'insert', $items );
                setTimeout( function(){
                    $container.isotope('layout');
                    SEMICOLON.initialize.resizeVideos();
                    SEMICOLON.widget.loadFlexSlider();
                    SEMICOLON.widget.masonryThumbs();
                }, 1000 );
            });
        });
    });

On first load I get always some strange gaps on top of the "articles". After adding more items via infinite scroll the gaps disappear and the new articles get these gaps again.

Do you have any suggestions for me to solve this problem?

The site is here:

http://s811333950.online.de/productions

Thank you.

Peter

Also I'd like to make the video rezise not so obvious, the best solution would be to do it before the list is shown. I use these timeouts, but this doesn't help.

I found a really easy solution. I just changed the order of function calls:

$($container).isotope();
SEMICOLON.initialize.resizeVideos();
SEMICOLON.widget.loadFlexSlider();
SEMICOLON.widget.masonryThumbs();
$container.isotope('layout'); // this one at last!

And no timeout anymore.