草庐IT

php - 在 PHP 中创建两个等高的随机纵向和横向图像列

coder 2024-04-06 原文

给定随机数量的纵向和横向图像，我正在尝试编写 PHP 代码来输出等高的两列:

  • 通过将值“1”分配给横向图像并将值“2”分配给肖像，我的想法是将总图像($totalphotos)除以二，然后检查图像值($photoval)是否在遍历循环时超过该数字。
  • 例如，如果您总共有 6 张图像，第一列已经有 2 张风景图像，而它遇到的第三张图像是肖像，它将重新排列数组 (array_splice) 并将肖像图像向下移动，然后继续到下一张图片。
  • 如果输出已经创建了两个等高的列(比如第一列中有 3 个风景，第二列中有 1 个风景 + 1 个肖像，最后一张图像将被丢弃)

我不确定我的方法在循环期间尝试输出 html 是否正确，或者首先分析数组并重新排序图像然后创建第二个循环来输出 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;
?>

最佳答案

这是我的解决方案:

<?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>

关于php - 在 PHP 中创建两个等高的随机纵向和横向图像列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12958367/

中创等高39gtarrayphpimagelandscapeportrait

有关php - 在 PHP 中创建两个等高的随机纵向和横向图像列的更多相关文章

  1. ruby-on-rails - 如何在 ruby​​ 中使用两个参数异步运行 exe？ - 2

    exe应该在我打开页面时运行。异步进程需要运行。有什么方法可以在ruby​​中使用两个参数异步运行exe吗？我已经尝试过ruby​​命令-system()、exec()但它正在等待过程完成。我需要用参数启动exe，无需等待进程完成是否有任何ruby​​gems会支持我的问题？ 最佳答案 您可以使用Process.spawn和Process.wait2:pid=Process.spawn'your.exe','--option'#Later...pid,status=Process.wait2pid您的程序将作为解释器的子进程执行。除

  2. ruby-on-rails - Rails - 从另一个模型中创建一个模型的实例 - 2

    我有一个正在构建的应用程序，我需要一个模型来创建另一个模型的实例。我希望每辆车都有4个轮胎。汽车模型classCar轮胎模型classTire但是，在make_tires内部有一个错误，如果我为Tire尝试它，则没有用于创建或新建的activerecord方法。当我检查轮胎时，它没有这些方法。我该如何补救？错误是这样的:未定义的方法'create'forActiveRecord::AttributeMethods::Serialization::Tire::Module我测试了两个环境:测试和开发，它们都因相同的错误而失败。 最佳答案

  3. ruby - 这两个 Ruby 类初始化定义有什么区别？ - 2

    我正在阅读一本关于Ruby的书，作者在编写类初始化定义时使用的形式与他在本书前几节中使用的形式略有不同。它看起来像这样:classTicketattr_accessor:venue,:datedefinitialize(venue,date)self.venue=venueself.date=dateendend在本书的前几节中，它的定义如下:classTicketattr_accessor:venue,:datedefinitialize(venue,date)@venue=venue@date=dateendend在第一个示例中使用setter方法与在第二个示例中使用实例变量之间是

  4. ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2

    我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？ 最佳答案 参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司

  5. ruby - 如何在 Ruby 中创建无类 DSL？ - 2

    我正在尝试找出如何为我的Ruby项目创建一种“无类DSL”，类似于在Cucumber步骤定义文件中定义步骤定义或在Sinatra应用程序中定义路由。例如，我想要一个文件，其中调用了我的所有DSL函数:#sample.rbwhen_string_matches/hello(.+)/do|name|call_another_method(name)end我认为用我的项目特有的一堆方法污染全局(内核)命名空间是一种不好的做法。因此方法when_string_matches和call_another_method将在我的库中定义，并且sample.rb文件将以某种方式在我的DSL方法的上下文中

  6. ruby-on-rails - 如何在 Rails 3 中创建自定义脚手架生成器？ - 2

    有这些railscast。http://railscasts.com/episodes/218-making-generators-in-rails-3有了这个，你就会知道如何创建样式表和脚手架生成器。http://railscasts.com/episodes/216-generators-in-rails-3通过这个，您可以了解如何添加一些文件来修改脚手架View。我想把两者结合起来。我想创建一个生成器，它也可以创建脚手架View。有点像RyanBates漂亮的生成器或web_app_themegem(https://github.com/pilu/web-app-theme)。我

  7. ruby - 为什么在 ruby​​ 中创建 Rational 不需要新方法 - 2

    这个问题在这里已经有了答案:关闭10年前。PossibleDuplicate:Rubysyntaxquestion:Rational(a,b)andRational.new!(a,b)我正在阅读ruby镐书，我对创建有理数的语法感到困惑。Rational(3,4)*Rational(1,2)产生=>3/8为什么Rational不需要new方法(我还注意到例如我可以在没有new方法的情况下创建字符串)？

  8. 华为OD机试用Python实现 -【明明的随机数】 2023Q1A - 2

    华为OD机试题本篇题目：明明的随机数题目输入描述输出描述：示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od，od薪资待遇，od机试题清单华为OD机试真题大全，用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o

  9. ruby-on-rails - 在 Ruby (on Rails) 中使用 imgur API 获取图像 - 2

    我正在尝试使用Ruby2.0.0和Rails4.0.0提供的API从imgur中提取图像。我已尝试按照Ruby2.0.0文档中列出的各种方式构建http请求，但均无济于事。代码如下:require'net/http'require'net/https'defimgurheaders={"Authorization"=>"Client-ID"+my_client_id}path="/3/gallery/image/#{img_id}.json"uri=URI("https://api.imgur.com"+path)request,data=Net::HTTP::Get.new(path

  10. python ffmpeg 使用 pyav 转换 一组图像 到 视频 - 2

    2022/8/4更新支持加入水印水印必须包含透明图像，并且水印图像大小要等于原图像的大小pythonconvert_image_to_video.py-f30-mwatermark.pngim_dirout.mkv2022/6/21更新让命令行参数更加易用新的命令行使用方法pythonconvert_image_to_video.py-f30im_dirout.mkvFFMPEG命令行转换一组JPG图像到视频时，是将这组图像视为MJPG流。我需要转换一组PNG图像到视频，FFMPEG就不认了。pyav内置了ffmpeg库，不需要系统带有ffmpeg工具因此我使用ffmpeg的python包装p

随机推荐