我试图在wordpress上随机放置缩略图。图像不应重叠。另外，z索引不能真正起作用（图像应位于所有其他元素的后面）。
内容是通过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/
最佳答案
这样可以更好地完成工作，但是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; ?>
关于php - 随机放置图片并避免重叠(没有wordpress插件)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40351541/