Php 在这里实现。请尝试详细说明，也许可以添加一个示例测试用例。@傻瓜塞斯：是的，我把两幅风景画的高度等同于一幅肖像画。这个问题应该已经发布到@AD7six:对不起，我没有意识到其中的区别。我喜欢你的逻辑，你的解决方案肯定有效，但我需要利用它，并将其集成到最终产
Php 在这里实现。请尝试详细说明，也许可以添加一个示例测试用例。@傻瓜塞斯：是的，我把两幅风景画的高度等同于一幅肖像画。这个问题应该已经发布到@AD7six:对不起，我没有意识到其中的区别。我喜欢你的逻辑，你的解决方案肯定有效，但我需要利用它，并将其集成到最终产,php,image,landscape,portrait,Php,Image,Landscape,Portrait,在这里实现。请尝试详细说明，也许可以添加一个示例测试用例。@傻瓜塞斯：是的，我把两幅风景画的高度等同于一幅肖像画。这个问题应该已经发布到@AD7six:对不起，我没有意识到其中的区别。我喜欢你的逻辑，你的解决方案肯定有效，但我需要利用它，并将其集成到最终产品中。明天测试后我会更新更多的评论。我很喜欢你的解决方案，但在整合到我的页面时遇到了问题。你能帮我把你的示例代码转换成一个解决方案吗？我可以在我的示例代码中使用相同的变量和$photos数组源代码。这个解决方案在集成到我的页面中时似乎不起作用。
在这里实现。请尝试详细说明，也许可以添加一个示例测试用例。@傻瓜塞斯：是的，我把两幅风景画的高度等同于一幅肖像画。这个问题应该已经发布到@AD7six:对不起，我没有意识到其中的区别。我喜欢你的逻辑，你的解决方案肯定有效，但我需要利用它，并将其集成到最终产品中。明天测试后我会更新更多的评论。我很喜欢你的解决方案，但在整合到我的页面时遇到了问题。你能帮我把你的示例代码转换成一个解决方案吗？我可以在我的示例代码中使用相同的变量和$photos数组源代码。这个解决方案在集成到我的页面中时似乎不起作用。它输出两个图像列，但它们的高度并不总是相同的。如果第二列中的最后一幅图像是一幅肖像画，它会删除该图像，这样您就可以在左侧看到3幅风景画，在右侧看到2幅风景画，并在右侧看到一个不均匀的列。不确定它为什么不工作。还抛出数组到字符串转换警告-指示错误=）。纠正
<?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;
?>
<?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>
<style type="text/css">
* { margin: 0; padding: 0; }
ul { list-style-type: none; width: 100px; }
b { color: white; }
.landscape { width: 100px; height: 50px; background-color: #f00; }
.portrait { width: 50px; height: 100px; background-color: #00f; }
</style>
<form action="<?php echo $_SERVER['REQUEST_URI']; ?>" method="get">
number of images to simulate: <input type="text" name="nimgs" value="<?php if(isset($_REQUEST['nimgs'])) echo intval($_REQUEST['nimgs']); else echo 10; ?>" /><br/>
<input type="submit">
</form><br/>
<hr/>
<?php
class ImageStack
{
public $images, $height;
function __construct()
{
$this->images = array();
$this->height = 0;
}
function push($image)
{
if( $image === false ) return; # catch failed calls to pop()
$this->height += $image['height'];
array_push( $this->images, $image );
}
function shift()
{
$image = array_shift( $this->images );
$this->height -= $image['height'];
return $image;
}
function total()
{
return $this->height;
}
function has($size)
{
foreach( $this->images as $i )
{
if( $i['height'] == $size ) return true;
}
return false;
}
function move( $size, $to, $max )
{
foreach( $this->images as $key => $value )
{
if( $value['height'] == $size )
{
if( $to->total() + $size <= $max )
{
$this->height -= $size;
$to->push( $value );
unset( $this->images[$key] );
}
return;
}
}
}
function output( $msg )
{
echo '<ul style="float: left; margin-left: 10px; background-color: #000;"><b>'.$msg.' </b>';
foreach( $this->images as $image )
{
echo "<li class='".($image['height'] == 1 ? 'landscape' : 'portrait')."'>$image[src]</li>";
}
echo '</ul>';
}
}
### create the random images ###
$nimgs = intval($_REQUEST['nimgs']);
$images = new ImageStack;
for($i=0; $i<$nimgs; $i++)
{
$images->push( array( 'height' => 1+rand()%2, 'src' => "img $i" ) );
}
### write the first column ###
$images->output('All: '.$images->total());
### initialization ###
$half = floor($images->total() / 2);
$left = new ImageStack;
$right = new ImageStack;
$temp = new ImageStack;
### if we got an odd total() of image height, remove a single 1 to temp ###
if( $images->total() % 2 )
{
$images->move(1, $temp, 3*$half); # sad but true: this moves the first one to temp, better would be the last
}
### while we got images on the initial stack ###
while( $images->total() )
{
$next = $images->shift();
if( $left->total() + $next['height'] <= $half ) # enough space @ left
{
$left->push( $next );
}
else
{
if( $left->total() < $half && $left->has(1) ) # enough space @ left if we move a 1 to temp
{
$left->move( 1, $right, $half );
$left->push( $next );
}
else
{
if( $right->total() + $next['height'] <= $half ) # enough space @ right
{
$right->push( $next );
}
else
{
if( $right->total() < $half && $right->has(1) ) # enough space @ right if we move a 1 to temp
{
$right->move(1, $temp, 3*$half);
$right->push( $next );
}
else # nowhere enough space left, except @ temp
{
$temp->push( $next );
}
}
}
}
}
$left->output('Left: '.$left->total());
$right->output('Right: '.$right->total());
$temp->output('Ignore: '.$temp->total());
?>
/**
* Turn the array of photos into 2 equal height columns
*
* @param array photos - array of photos
* @return string
*/
function printPhotos($photos) {
$cells = buildCells($photos);
return renderColumns($cells);
}
/**
* Take the input array, and build an indexed array
*
* Use variable references to construct portrait and landscape arrays,
* and maintain an ordered list such that the original order (after
* accounting for the cell logic) is maintained.
* If at the end there is one portrait image on its own - delete it.
*
* @param array photos - array of photos
* @return array
*/
function buildCells($photos) {
$return = array(
'ordered' => array(),
'landscape' => array(),
'portrait' => array()
);
$i = 0;
foreach($photos as $photo) {
unset($cell);
$orientation = $photo['orientation'];
if ($orientation === 'portrait') {
if (empty($return['portrait'][$i])) {
$cell = array();
$return['portrait'][$i] =& $cell;
$return['ordered'][] =& $cell;
} else {
$cell =& $return['portrait'][$i];
}
$cell[] = $photo;
if (count($cell) === 2) {
$i++;
}
} else {
$cell = array($photo);
$return['landscape'][] =& $cell;
$return['ordered'][] =& $cell;
}
}
if (count($return['portrait'][$i]) === 1) {
$return['portrait'][$i] = null;
$return['portrait'] = array_filter($return['portrait']);
$return['ordered'] = array_filter($return['ordered']);
}
return $return;
}
/**
* Convert the output of buildCells into html
*
* @param array cells - indexed array of cells
* @return string column html
*/
function renderColumns($cells) {
$orderedCells = renderCells($cells);
$cellsPerColumn = (int)(count($orderedCells) / 2);
$columns = array_slice(array_chunk($orderedCells, $cellsPerColumn), 0, 2);
$return = '';
foreach($columns as $cellsInColumn) {
$return .= "<div class=\"column\">\n";
$return .= implode('', $cellsInColumn);
$return .= "</div>\n";
}
return $return;
}
/**
* Process portrait and landscape photo-cells
*
* Converts the array representation of cells into html, and returns
* The cells in presentation order
*
* @param array cells - indexed array of cells
* @return array
*/
function renderCells($cells) {
foreach(array('landscape', 'portrait') as $orientation) {
foreach($cells[$orientation] as &$cell) {
$cell = renderCell($cell, $orientation);
}
}
return $cells['ordered'];
}
/**
* For each photo in the cell - turn it into html
*
* @param array cell - array of photo(s)
* @param string orientation
* @return string
*/
function renderCell(&$cell, $orientation) {
$return = "\t<div class=\"cell\">\n";
foreach($cell as $photo) {
$return .= renderPhoto($photo, $orientation);
}
$return .= "\t</div>\n";
return $return;
}
/**
* Convert the photo into a html string
*
* @param array photo
* @param string orientation
* @return string
*/
function renderPhoto($photo, $orientation) {
if ($orientation === 'landscape') {
$src = $photo['src'];
} else {
$src = $photo['src_medium'];
}
$caption = htmlentities($photo['caption'], ENT_QUOTES);
$return = "\t\t<div class=\"$orientation thumbnail\">\n";
$return .= "\t\t\t<a href=\"{$photo['link']}\"><img src=\"$src\" alt=\"$caption\"></a>\n";
$return .= "\t\t</div>\n";
return $return;
}
$data = array(
array('src' => 'x', 'src_medium' => 'y', 'orientation' => 'landscape', 'link' => 'z', 'caption' => 'one'),
array('src' => 'x', 'src_medium' => 'y', 'orientation' => 'portrait', 'link' => 'z', 'caption' => 'two'),
array('src' => 'x', 'src_medium' => 'y', 'orientation' => 'portrait', 'link' => 'z', 'caption' => 'three'),
array('src' => 'x', 'src_medium' => 'y', 'orientation' => 'portrait', 'link' => 'z', 'caption' => 'four'),
array('src' => 'x', 'src_medium' => 'y', 'orientation' => 'landscape', 'link' => 'z', 'caption' => 'five'),
array('src' => 'x', 'src_medium' => 'y', 'orientation' => 'portrait', 'link' => 'z', 'caption' => 'six'),
array('src' => 'x', 'src_medium' => 'y', 'orientation' => 'portrait', 'link' => 'z', 'caption' => 'seven')
);
echo printPhotos($data);
<div class="column">
<div class="cell">
<div class="landscape thumbnail">
<a href="z"><img src="x" alt="one"></a>
</div>
</div>
<div class="cell">
<div class="portrait thumbnail">
<a href="z"><img src="y" alt="two"></a>
</div>
<div class="portrait thumbnail">
<a href="z"><img src="y" alt="three"></a>
</div>
</div>
</div>
<div class="column">
<div class="cell">
<div class="portrait thumbnail">
<a href="z"><img src="y" alt="four"></a>
</div>
<div class="portrait thumbnail">
<a href="z"><img src="y" alt="six"></a>
</div>
</div>
<div class="cell">
<div class="landscape thumbnail">
<a href="z"><img src="x" alt="five"></a>
</div>
</div>
</div>