生成随机图像到另一个 div 的高度。 PHP

Question

这段代码目前从我的图像目录中选择 6 张随机图像并将它们放置在侧边栏中以进行显示。问题是我不希望侧边栏只显示 6 张图像，我希望侧边栏生成图像以匹配我的主要内容 div 的高度。

for($i = 0 ; $i < $imagesCount ; $i++) {

$randomIndex = array_rand($images); 

$file_title = $randomImage = $images[$randomIndex];
unset($images[$randomIndex]);
?>
<a href="<?php echo $randomImage ?>"><img src="<?php echo $randomImage ?>"
     width="100%" height="150%"; alt="" /> <br /><br /></a>

<?php
}
?>

现在我的想法是使用 jquery 来查找 div 的高度并生成图像，直到使用以下伪代码达到高度值：
for($i = 0 ; $i < $("#content").height(); ; $i++) { random images stuff here; }

这里的问题（除了我混合 JQuery 和 PHP 的事实，我稍后会修复）是 .height() 将返回一个像素值，因此随机生成 800-1200 个随机图像。有没有人对如何解决这个问题有任何想法？这是该页面的链接，因此如果有任何混淆，您可以了解我的意思。 Link

Answer 1

确实有很多方法可以解决这个问题，但是......

使用 php 像这样创建你的 dom 元素并将它们作为变量传递给 jQuery：

<?php

$images = howeverYourGettingYourSixImages();

for($i=0; $i<count($images); $i++){
    $image_array[]='<img  class="images" src="'.$images[$i].'"/>';
}

echo('<script type="text/javascript">var images='.json_encode($image_array).'</script>');
?>

在你身体的某个地方声明你的容器

<div id="content"></div>

在body关闭之前执行jQuery

<script type="text/javascript">

    var container = jQuery('#content');
    var container_height = container.height();
    var image_height = container_height / images.length;
    jQuery.each(images,function(k,v){
       container.append(v);
    });
    jQuery(".images").height(image_height);;

</script>

并确保您的内容容器具有高度，并且元素堆栈会在您的头部添加一些 css

<style type="text/css">
    #content{
            height: 600px;
    }
    .images{
            float:left;
            clear:both;
    }
</style>