Cha*_*ana 5 php landscape portrait image
鉴于随机数量的纵向和横向图像,我正在尝试编写PHP代码以输出两列高度相等的列:
我不确定我的方法在循环期间尝试输出html是否正确,或者是否更有意义分析数组并首先重新排序图像然后创建第二个循环以输出html.
我的代码有点脏,我的"array_splice"方法可能甚至不完全正确.如果您看到更好的方法,请随意废弃我的代码并向我展示更好的内容!任何帮助是极大的赞赏!!
<?php
$photoval = 0;
$totalcolumns = 0;
$totalphotos = count($photos);
for ($counter = 0; $counter < $totalphotos; $counter++) :
$photo = $photos[$counter];
if ($photoval == 0) echo " <div class=\"column\">\n";
if ($photo['orientation'] == "portrait" && $photoval >= $totalphotos/2) {
if ($counter == $totalphotos)
echo " </div>\n";
array_splice($photos, $counter, 1, array($photo));
continue;
}
?>
<div class="<? echo $photo['orientation'] ?> thumbnail">
<a href="<?php echo $photo['link'] ?>">
<img src="<?php if ($photo['orientation'] == "landscape") echo $photo['src']; else echo $photo['src_medium'];?>" alt="<? echo htmlentities($photo['caption'], ENT_QUOTES) ?>">
</a>
</div>
<?php
if ($photoval >= $totalphotos/2 || $counter == $totalphotos) {
echo " </div>\n";
$photoval = 0;
$totalcolumns++;
if ($totalcolumns == 2)
break;
}
endfor;
?>
小智 2
这是我的解决方案：
<?php
/*
** Simulated photo array for testing purposes, to be substituted with the real photo array
*/
$photos = array(
array('orientation' => 'portrait' , 'link' => '#', 'src' => '', 'src_medium' => '', 'caption' => ''),
array('orientation' => 'portrait' , 'link' => '#', 'src' => '', 'src_medium' => '', 'caption' => ''),
array('orientation' => 'portrait' , 'link' => '#', 'src' => '', 'src_medium' => '', 'caption' => ''),
array('orientation' => 'landscape', 'link' => '#', 'src' => '', 'src_medium' => '', 'caption' => ''),
array('orientation' => 'landscape', 'link' => '#', 'src' => '', 'src_medium' => '', 'caption' => ''),
array('orientation' => 'landscape', 'link' => '#', 'src' => '', 'src_medium' => '', 'caption' => ''),
array('orientation' => 'landscape', 'link' => '#', 'src' => '', 'src_medium' => '', 'caption' => ''),
array('orientation' => 'landscape', 'link' => '#', 'src' => '', 'src_medium' => '', 'caption' => ''),
array('orientation' => 'landscape', 'link' => '#', 'src' => '', 'src_medium' => '', 'caption' => '')
);
$album = array(
'portrait' => array(),
'landscape' => array()
);
foreach ($photos as $photo) {
extract($photo);
$album[$orientation][] = array(
'orientation' => $orientation,
'link' => $link,
'src' => ($orientation == 'landscape') ? $src : $src_medium,
'caption' => htmlentities($caption, ENT_QUOTES)
);
}
$columns = array(
array(),
array()
);
while (count($album['portrait']) >= 2) {
if (count($album['landscape']) >= 2) {
$columns[0][] = array_shift($album['portrait']);
$columns[1][] = array_shift($album['landscape']);
$columns[1][] = array_shift($album['landscape']);
} else {
$columns[0][] = array_shift($album['portrait']);
$columns[1][] = array_shift($album['portrait']);
}
}
while (count($album['landscape']) >= 2) {
$columns[0][] = array_shift($album['landscape']);
$columns[1][] = array_shift($album['landscape']);
}
?>
<!DOCTYPE html>
<html>
<head>
<style>
.column { width: auto; float: left; border: dashed 1px #666; padding: 10px }
.column div:not(:last-child) { margin-bottom: 10px }
.portrait { width: 200px; height: 200px; background-color: red; }
.landscape { width: 200px; height: 95px; background-color: green; }
</style>
</head>
<body>
<?php foreach ($columns as $photos): ?>
<div class="column">
<?php foreach ($photos as $photo): ?>
<div class="<?= $photo['orientation'] ?>">
<!-- uncomment the following line when using the real photo array -->
<!-- a href="<?= $photo['link'] ?>"><img src="<?= $photo['src'] ?>"> alt="<?= $photo['caption'] ?>"></a -->
</div>
<?php endforeach ?>
</div>
<?php endforeach ?>
</body>
</html>
* 更新 *
另一个解决方案：
<?php
/*
** Create a random photo array
*/
$photos = array();
$totalphotos = rand(10, 30);
for ($i = 0; $i < $totalphotos; $i++) {
$o = (rand(0, 1) == 1) ? 'portrait' : 'landscape';
$photos[] = array('orientation' => $o, 'link' => '#', 'src' => '', 'src_medium' => '', 'caption' => '');
}
//----------------------------------
//--- Here starts the real stuff ---
//----------------------------------
/*
** The "last" array contains the index of the last added
** portrait and landscape image in each column of the
** "album" array
*/
$last = array(
'portrait' => array(0, 0),
'landscape' => array(0, 0)
);
/*
** Add each photo to the lowest height column
*/
$album = array();
$len = array(0, 0);
for ($i = 0; $i < $totalphotos; $i++) {
$o = $photos[$i]['orientation'];
$c = ($len[0] < $len[1]) ? 0 : 1;
$len[$c] += ($o == 'portrait') ? 2 : 1;
$album[$c][] = $i;
$last[$o][$c] = count($album[$c]) - 1;
}
/*
** If the columns heights are different,
** remove the last portrait or landscape image
** from the highest column
*/
$c = ($len[0] > $len[1]) ? 0 : 1;
$diff = abs($len[0] - $len[1]);
//echo "<pre>diff={$diff}</pre>\n";
if ($diff == 1) {
unset($album[$c][$last['landscape'][$c]]);
} else if ($diff == 2) {
unset($album[$c][$last['portrait'][$c]]);
}
?>
<!DOCTYPE html>
<html>
<head>
<style>
.column { border: dashed 1px #666; width: 50px; padding: 0 10px 10px 10px; overflow: auto; float: left; }
.column div { margin: 10px 5px 0 0; }
.portrait { width: 50px; height: 100px; background-color: red; }
.landscape { width: 50px; height: 45px; background-color: green; }
</style>
</head>
<body>
<?php for ($c = 0; $c < 2; $c++) { ?>
<div class="column">
<?php foreach ($album[$c] as $p): ?>
<div class="<?= $photos[$p]['orientation'] ?> thumbnail">
<!--a href="<?= $photos[$p]['link'] ?>"><img src="<?= $photos[$p]['src'] ?>" alt="<?= $photos[$p]['caption'] ?>"></a-->
</div>
<?php endforeach ?>
</div>
<?php } ?>
</body>
</html>