イメージをランダムに配置し、重複を避ける（ワードプレスプラグインなし）

Question

ランダムにサムネイル画像をワードプレスに配置しようとしています。画像は重ならないはずです。また、z-indexは実際には機能しません（イメージは他のすべての要素の後ろにあるはずです）。 コンテンツは、PHPドキュメントを通じて動的に生成されます。あなたは私の道を照らすことができるだろう

<?php if (has_post_thumbnail()) : ?><div class="js-container bottomdrag"> 
<script type="text/javascript"> 

$(document).ready(function() {  
$('.js-container a').each(function() { 
    var height = window.innerHeight/2; 
    var width = window.innerWidth/2; 
//This var top should provide a scroll so that the user gradually finds the images 
    var top = Math.floor(Math.random() * (($(window).height() * 3) - height)); 
     var left = Math.floor(Math.random() * 55); 
    $(this).css({ 
     "z-index":"-999", 
     "top": top, 
//this margin-bottom is there to allow some space after the last image so that the user can scroll it 
     "margin-bottom":"30" + "vh", 
     "left": left + "vw", 
     "position":"absolute", 
     "display":"block", 
    }); 

}); 

}); 
</script> 
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> 
<?php the_post_thumbnail(); ?></div> <!--end of js-container--> 

： は、私はプラグインを避けるためにしようとしていますので、私はこのようにそれをやっていますか？ ここにページがあります：http://dev.visualvisual.com/works/

Answer 1

これは、より良い仕事ですが、Z-インデックスはまだ動作していません。

<?php if (has_post_thumbnail()) : ?><div class="js-container bottomdrag"> 
<script type="text/javascript"> 

function randomMargin(){ 
$('.attachment-post-thumbnail').each(function(){ 
    randomizeObject(this); 

}); 

} 

function randomMargin(){ 
$('.attachment-post-thumbnail').each(function(){ 
    randomizeObject(this);  
}); 

} 

function randomizeObject(el){ 
var randomnumber1=Math.floor(Math.random()*70); 
console.log(randomnumber1); 
var randomnumber2=Math.floor(Math.random()*50); 
console.log(randomnumber2); 
$(el).css({"margin-top": randomnumber1+"vh", "margin-left": randomnumber2+"vw", "z-index":"-999"}); 
} 
randomMargin(); 


</script> 
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"> 
    <?php the_post_thumbnail(); ?></div> <!--end of js-container--> 
</a> 
<?php endif; ?>