JQuery — Генерация случайных изображений на высоту другого div. Переполнение стека
Этот код на данный момент выбирает 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 случайных изображений. У кого-нибудь есть идеи как подойти к этой проблеме? Вот ссылка на страницу, чтобы вы могли понять, что я имею в виду, если есть какая-то путаница. Ссылка на сайт
Решение
Там действительно много способов подойти к этому, но …
Используйте 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>
и перед закрытием тела выполните 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>
Другие решения
Других решений пока нет …