php,html格子铺随机展示事例

一次一个娃娃问我关于随机展示的问题,大概题目是这样的把一个方框分割成几横几列的小方框,然后给定几个图片,要求规定的几个小方框不能填,其他方框随机展示上面的图片。今天就来讲讲这个吧。

效果图

格子铺-1格子铺-2

思路上应该很简单,就将给定的图片,打乱顺序放到img里就可以了。看下面这段php代码

//网上随便找几个图片
$list = array("http://images.kumi.cn/uploadfile/dhpic/lanmaolongqituan9898.jpg",
              "http://logo1.tool.hexun.com/816076-150.jpg",
              );
//规定不能放的位置
$list2 = array(1,3,5,6,7);
//用来放最后的位置数组
$list3 = array();
//每个图片找个位置
foreach($list as $u){
   //这里是判断是不是已经填满了,填满了就不用填了
  if(count($list3) >= (20-count($list2)))
    break;
//随机一个位置
  $k = rand(0,19);
//如果位置在规定的不能放的位置或者位置已经被其他图片占用,重新选择位置
  while(in_array($k,$list2) || in_array($k,array_keys($list3))){

    $k = rand(0,19);

  }
  $list3[$k] = $u;
}
//var_dump($list3);

上面的代码注释已经很清楚了不再介绍了,但是里面有个in_array可能大家不了解

in_array($a,$b)函数是用来判断某个值是否在数组里面,这里的值可以是任何类型。有两个参数$a是你要检查的值,$b是被检查的数组,如果存在就返回true否则返回false

好了新的无序的数组生成了,接下来的任务就是放到html里面了

<div class="main clearfix">
   <?php for($i=0;$i<20;$i++){?>
   <div class="gezi">
   <?php if(in_array($i,array_keys($list3))){?>
   <img src="<?php echo $list3[$i]?>">
   <?php }?>
   </div>
   <?php }?>
</div>

单有上面的代码是不能显示成图片那样的。因为还没有给大家讲过CSS的内容,大家看看完整的代码,去试验下就可以了

<html>
<title>
测试格子
</title>
<style>
.clearfix{    clear: both; display: block;   font-size: 0; height: 0;}
.main{margin:auto;width:400px;height:500px;background:url("http://image.rayli.com.cn/0004/2009-03-23/images/2009323193435598.jpg") no-repeat 0 0;}
.gezi{width:98px;height:98px;float:left;z-index:1;font-size:12px;border:1px red solid;}
</style>
<body>
<?php

$list = array(
              "http://images.kumi.cn/uploadfile/dhpic/lanmaolongqituan9898.jpg",
              "http://logo1.tool.hexun.com/816076-150.jpg",
              );
$list2 = array(1,3,5,6,7);
$list3 = array();

foreach($list as $u){
  if(count($list3) >= (20-count($list2)))
    break;
  $k = rand(0,19);
  while(in_array($k,$list2) || in_array($k,array_keys($list3))){

    $k = rand(0,19);

  }
  $list3[$k] = $u;
}
//var_dump($list3);
?>
<div class="main clearfix">
   <?php for($i=0;$i<20;$i++){?>
   <div class="gezi">

                              <?php if(in_array($i,array_keys($list3))){?>
                                                                        <img src="<?php echo $list3[$i]?>">
                                                                        <?php }?>
   </div>
                              <?php }?>

</div>

</body>
</html>

把这段代码拷贝放到test目录里面保存成gezi.php,然后打开浏览器www.test.com/gezi.php(如果前面都是按照我的文章来配置的话是应该就是这样的)是不是看到前面给出的图了呢。是不是很简单,这个例子主要用到的是流程控制中的循环,以及数组的基本应用。其实div布局只是其中一个方法,还可以用table等做,大家可以自己试试,接下来我再给一份用table做的例子。

<html>
<title>
测试格子
</title>
<style>
.clearfix{    clear: both; display: block;   font-size: 0; height: 0;}
.main{margin:auto;width:400px;height:500px;background:url("http://image.rayli.com.cn/0004/2009-03-23/images/2009323193435598.jpg") no-repeat 0 0;}
.gezi{width:98px;height:98px;float:left;z-index:1;font-size:12px;border:1px red solid;}
.main table td{border:1px solid red;width:98px;height:98px;}
</style>
<body>
<?php

$list = array(
              "http://images.kumi.cn/uploadfile/dhpic/lanmaolongqituan9898.jpg",
              "http://logo1.tool.hexun.com/816076-150.jpg",
              );
$list2 = array(1,3,5,6,7);
$list3 = array();

foreach($list as $u){
  if(count($list3) >= (20-count($list2)))
    break;
  $k = rand(0,19);
  while(in_array($k,$list2) || in_array($k,array_keys($list3))){

    $k = rand(0,19);

  }
  $list3[$k] = $u;
}
//var_dump($list3);
?>
<div class="main clearfix">
  <table width="100%" height="100%" cellspacing="0" cellpadding="0">
    <tr>
      <?php for($i=0;$i<20;$i++){?>
            <?php if($i % 4==0){?>
            </tr></tr>
            <?php }?>

            <td><?php if(in_array($i,array_keys($list3))){?><img src="<?php echo $list3[$i]?>"><?php }else{?> <?php }?></td>
      <?php }?>
    </tr>
  </table>

</div>
</body>
</html>

看看两个是不是效果一样

本文固定链接: http://www.qaforcode.net/archives/367 | 猪哥每日一贴

该日志由 趴在树上的猪 于2012年11月26日发表在 html, php 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: php,html格子铺随机展示事例 | 猪哥每日一贴
关键字: , ,
【上一篇】
【下一篇】

php,html格子铺随机展示事例:目前有1 条留言

  1. 沙发
    菜鸟学习:

    博大精深,菜鸟直接拷贝拿去用了,太没技术含量了 😕

    2012-12-01 下午 2:32 [回复]

发表评论


快捷键:Ctrl+Enter

浙公网安备 33010602001905号