随机放置图像并避免重叠（没有 wordpress 插件）答案

【问题标题】：Position images randomly and avoid overlapping (without wordpress plugins)随机放置图像并避免重叠（没有 wordpress 插件）
【发布时间】：2023-04-01 13:20:01
【问题描述】：

我正在尝试在 wordpress 上随机放置缩略图。图像不应重叠。此外，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/

【问题讨论】：

标签： php jquery css wordpress random

【解决方案1】：

这可以更好地完成工作，但 Z-index 仍然无法正常工作。

<?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; ?>

【讨论】：