Shortcode does not work, changes html order

My shortcode is a mess, he changes the order. This is my code:

add_shortcode( 'recent-portfolio', 'brechting_recent_portfolio' );

function brechting_recent_portfolio( $atts ) {

    extract( shortcode_atts( array(
        'numbers' => '5',
    ), $atts ) );

    $rposts = new WP_Query(
        array( 'post_type' => 'portfolio', 'posts_per_page' => $numbers, 'orderby' => 'date' )
    );

    if ( $rposts->have_posts() ) {
        $html="<div class="recent-portfolio grid" data-masonry="{ "columnWidth": 200, "itemSelector": "img" }">";
        while( $rposts->have_posts() ) {
            $rposts->the_post();
            if ( has_post_thumbnail()) {
            $html .= sprintf(
                '<div class="grid-item"><a href="https://wordpress.stackexchange.com/questions/278102/%s" title="">%s</a></div>',
                the_post_thumbnail_url( 'full' ),
                the_title_attribute(),
                //get_the_title()
                the_post_thumbnail()
            );
        }}
        $html .= '</div>';
    }

    wp_reset_query();

    return $html;

}

This is the output:

<div class="entry-content2" data-masonry="{ " columnwidth":="" 200,="" "itemselector":="" "img"="" }"="">
    http://localhost:8888/wp-content/uploads/2017/08/geboortekaart-Bart.pngGeboortekaartje Bart<img src="https://localhost:8888/wp-content/uploads/2017/08/geboortekaart-Bart.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="http://localhost:8888/wp-content/uploads/2017/08/geboortekaart-Bart.png 788w, http://localhost:8888/wp-content/uploads/2017/08/geboortekaart-Bart-300x171.png 300w, http://localhost:8888/wp-content/uploads/2017/08/geboortekaart-Bart-768x439.png 768w" sizes="100vw" width="788" height="450">http://localhost:8888/wp-content/uploads/2017/08/lejo.pngLejo<img src="https://localhost:8888/wp-content/uploads/2017/08/lejo.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="http://localhost:8888/wp-content/uploads/2017/08/lejo.png 788w, http://localhost:8888/wp-content/uploads/2017/08/lejo-300x171.png 300w, http://localhost:8888/wp-content/uploads/2017/08/lejo-768x439.png 768w" sizes="100vw" width="788" height="450">
<div class="recent-portfolio grid" data-masonry="{ " columnwidth":="" 200,="" "itemselector":="" "img"="" }"="">
<div class="grid-item">
<a href="" title=""></a></div><div class="grid-item"><a href="" title=""></a>
</div>
</div>
</div>

If I use get_title() it works as well, but if I use featured image-based function it’s changes the order…

Can anyone please help me?

the_post_thumbnail_url() will echo the URL. You should use functions that have get_the_... in the beginning of their names, since functions starting with the_... will generally echo the content.

So, your sprintf should use get_the_post_thumbnail_url() like this:

        $html .= sprintf(
            '<div class="grid-item"><a href="https://wordpress.stackexchange.com/questions/278102/%s" title="">%s</a></div>',
            get_the_post_thumbnail_url( get_the_ID(), 'full' ),
            the_title_attribute( 'echo=0' ),
            //get_the_title()
            //the_post_thumbnail()
        );

However, in this case the_title_attribute() doesn’t have a get_the_... version as far as I know. But you can disable the echo by passing it as an argument to the function.

Also, use wp_reset_postdata(); instead of wp_reset_query(). The latter should be used when you use query_posts() (which you shouldn’t use!).