纯php实现图片瀑布流渲染

阅读：评论：0

纯php实现图片瀑布流渲染

说到图片瀑布流，大家首先想到的是JavaScript实现。最近有朋友问我如何用php渲染图片瀑布流，忙里抽闲，写了个小demo，一会把代码粘到下面和大家分享。

其实无论是JavaScript还是php还是其他语言，实现瀑布流的逻辑是差不多的，都是把图片分成几列，宽度相同，高度不同，按照宽度计算出相对高度，循环找高度最小的列往里面插入新图片，如此往复，直到把所有的图片都插入到相应的列里，JavaScript和php的不同无非就是JavaScript生成瀑布流动态插入图片然后计算高度，php可以先计算出所有图片的相对高度，再分类放到不同的列数组里面，最后直接把瀑布流以静态页面的形式发送给浏览器。

下面还是把代码粘出来，注释写的比较详细了

<?php
namespace photos;
use photos;
/*** php图片瀑布流显示* by sdxjwkq01*/
class waterFallFlow{/*** 构造方法*/public function __construct(){$this->listView();}/*** [listView 瀑布流渲染]* @return [type] [void]*/public function listView(){$files=scandir("imgs");$imgs=[];//取得所有图片信息,宽度取等宽，然后计算相对高度for($i=2;$i<count($files);$i++){$imgInfo=getimagesize("imgs/".$files[$i]);$imgs[]=["url"=>"imgs/".$files[$i],"width"=>100,"height"=>(int)round(100*$imgInfo[1]/$imgInfo[0])];}$col=2;//瀑布流列数// var_dump($imgs);$heights=[];//for($i=0;$i<$col;$i++){$heights[]=0;}$outImgs=[];//准备要输出的图片路径foreach ($imgs as $key=>$value) {$minHeightIndex=array_search(min($heights), $heights);//找到瀑布流列最小值$outImgs[$minHeightIndex][]=$value["url"];//插入图片$heights[$minHeightIndex]+=$value["height"];}// var_dump($outImgs);$divWidth=(int)round(100/$col);//模板渲染$html=<<<HTML
<head><meta charset="utf-8"><style type="text/css">.screen{position: absolute;top:0px;width:500px;overflow-x:none;}.list{position: absolute;top:0px;width:{$divWidth}%;}img{width: 100%;padding: 1px;}</style>
</head>
<body><div class="screen">nr
HTML;foreach ($outImgs as $key=>$value) {$divLeft=$key*$divWidth;$html.="tt<div class='list' style='left:{$divLeft}%'>nr";foreach ($value as $k=>$v) {$html.="ttt<img src='{$v}'/>nr";}$html.="tt</div>nr";}$html.="t</div>nr</body>nr";echo $html;}
}
new waterFallFlow();

看一下运行后的效果，如下图

这个$col=2;表示瀑布流的列数，我们可以自己定义，例如改为3列，那么运行一下效果如下

然后我们看一下浏览器接收到的源代码，真的是没有一点JavaScript，已经渲染好的静态页面，如下图

这个demo仅供大家交流学习，不建议用于实际项目，现在用户电脑普遍配置较高，瀑布流的渲染还是建议用JavaScript去实现，毕竟服务端渲染涉及到IO操作，图片信息的读取，对内存开支较大，交给前段实现可以缓解服务器压力，不过后台渲染稳定性更好，不会出现因为网络延迟等原因导致渲染错误，各有所长吧。

okay，今天就先分享到这里。

本文发布于:2024-01-28 15:40:41，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/17064276448467.html

上一篇：jQuery图片瀑布流

下一篇：无聊加瞌睡中来这