纯php实现图片瀑布流渲染

sdxjwkq01

于 2022-07-10 20:34:33 发布

阅读量577

点赞数

文章标签： php javascript 前端算法 python

本文链接：https://blog.csdn.net/sdxjwkq01/article/details/125709727

版权

说到图片瀑布流，大家首先想到的是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">\n\r
HTML;
		foreach ($outImgs as $key=>$value) {
			$divLeft=$key*$divWidth;
			$html.="\t\t<div class='list' style='left:{$divLeft}%'>\n\r";
			foreach ($value as $k=>$v) {
				$html.="\t\t\t<img src='{$v}'/>\n\r";
			}
			$html.="\t\t</div>\n\r";
		}
		$html.="\t</div>\n\r</body>\n\r";
		echo $html;
	}
}
new waterFallFlow();

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

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

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

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

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

sdxjwkq01

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
纯php实现图片瀑布流渲染

说到图片瀑布流，大家首先想到的是JavaScript实现。最近有朋友问我如何用php渲染图片瀑布流，忙里抽闲，写了个小demo，一会把代码粘到下面和大家分享。其实无论是JavaScript还是php还是其他语言，实现瀑布流的逻辑是差不多的，都是把图片分成几列，宽度相同，高度不同，按照宽度计算出相对高度，循环找高度最小的列往里面插入新图片，如此往复，直到把所有的图片都插入到相应的列里，JavaScript和php的不同无非就是JavaScript生成瀑布流动态插入图片然后计算高度，php可以先
复制链接

扫一扫