How to get my thumbnails to display in random positions (in archive page wordpress)

Question

I have registered a custom post type in my theme (no plugins) in my functions.php wordpress file like this:

add_action( 'init', 'create_post_type' );
function create_post_type() {
register_post_type( 'Works',
array(
  'labels' => array(
    'name' => __( 'Works' ),
    'singular_name' => __( 'Work' )
  ),
'public' => true,
'description' => ('Work'),
'has_archive' => true,
'taxonomies' => array('category'),
'supports' => array( 'title', 'editor', 'thumbnail')
)
);
}

I have then created an "archive-works.php" where I am only showing this custom post-type. And there I am merely showing the thumbnails and the title when you hover. Those thumbnails are links (there is a "a" tag around the "img"). And they are being styled like this:

#content img {
width: 70%;
height: auto;
}

Meanwhile I have wrapped a ".js-container" class around all links.

<div class="js-container">
<a href="http://dev.visualvisual.com/works/work-3/" title="Work 3">
    <img width="960" height="630" src="http://dev.visualvisual.com/wp-content/uploads/2016/10/10476558_10152767209223872_3064425635001081899_o.jpg" 
class="attachment-post-thumbnail size-post-thumbnail wp-post-image" 
alt="10476558_10152767209223872_3064425635001081899_o" 
srcset="http://dev.visualvisual.com/wp-content/uploads/2016/10/10476558_10152767209223872_3064425635001081899_o.jpg 960w, http://dev.visualvisual.com/wp-content/uploads/2016/10/10476558_10152767209223872_3064425635001081899_o-300x197.jpg 300w, http://dev.visualvisual.com/wp-content/uploads/2016/10/10476558_10152767209223872_3064425635001081899_o-768x504.jpg 768w" 
sizes="(max-width: 960px) 100vw, 960px">
</a>
</div>

I want the images to deviate ever so slightly from their natural positions. I mean, I need to place them randomly position-wise (more on the left or on the right, and if possible slightly above or below of where they should be. I was doing a bit of research and I have found this example: Positioning images in random places

I know it is a combination of javascript and css as in the example above. This is my current stage: http://dev.visualvisual.com/works/ I have tried typing this on the header.php file but with no results:

<script type="text/javascript">
$('.js-container a img').each(function() { 
var top = Math.floor(Math.random() * 400), left = Math.floor(Math.random() * 400);
$(this).css({
"top": top, 
"left": left, 
"position":"absolute", 
"display":"inline-block"
}); 
});
</script> 

Can someone help me out here? Many thanks.

Answer 1

This should be a correct JavaScript for your case. You don't need that .js-container anymore, it is bound directly to the post divs:

    jQuery(window).load(function() {
        $('div.hentry.works').each(function () {
            // get the size and position
            var width = $(this).find('img').width(),
                height = $(this).find('img').height(),
                top = Math.floor(Math.max((Math.random() * $(window).height() - height), 0)),
                left = Math.floor(Math.max((Math.random() * $(window).width() - width), 0));

            // place the element
            $(this).css({
                "display": "block",
                "position": "absolute",
                "top": top,
                "left": left,
                "width": width,
                "height": height
            });
        });
    });