木桶布局原理与实现

项目中有一些图片布局需要按木桶布局排列，而前端工程师是个新手，不会用JS实现，只能在后端处理，直接返回处理好的图片尺寸，达到木桶布局的效果。
木桶布局就是将图片按行、等高排列，并且保证每一行图片排列正好占满，边距相等，效果如下：

实现木桶布局的图片尺寸处理主要有以下步骤：
1、设置行高、行宽、边距
2、获取图片高、宽
3、将每个图片高度设置为行高，并等比例缩放图片宽度
4、遍历图片尺寸数组，从第一个图片开始，累计图片宽度，并将图片放入一个数组，当加上第n+1个图片的宽度后，累计宽度与行宽的差大于行高，从第n+1个图片开始重新累计图片宽度，并重新第n+1个开始放入新的数组中，以此获取多个包含着若干图片宽度之和与行宽相近的数组，将它们整成二维数组以便下一步处理。
5、将预处理好的二维数组，再次遍历，先计算图片处理后的宽度之width和与行宽row_width之比ratio，再用行高row_height与该ratio相除，获取等比例width等比例缩小成row_width得到的图片高度height，这个height就是图片实际应该设置的高，接下来按height通过等比例缩放来获取图片实际应该设置的宽度img_width，并更新原数组中的宽度。
6、处理后的数组就差不多是可实现木桶布局的图片尺寸了，但由于之前的计算中，由于可能浮点数运算然后四舍五入导致出现误差，所有还需要矫正一下，累计每一个图片组的宽度之和，计算与行宽的误差over_width，然后通过为每组最后一个图片增减over_width，矫正误差。
上面步骤主要是为了讲解原理，所以分了好几次遍历来进行不同处理，实际代码实现时，可以合并处理步骤。
下面是我写的一个demo源码：

......
//artimages 是图片数组
foreach($artimages as $k=>$artimage){if(!empty($artimage['production'])){$tmp['url'] = $artimage['url'];$tmp['id'] = $artimage['id'];list($tmp['w'],$tmp['h'])=getimagesize(storage_path('app').'/'.$artimage['path']);array_push($image_arr,$tmp);}}foreach($image_arr as $k=>$image){$image_arr[$k]['w'] = intval($image['w'] * (300/number_format($image['h'],2,'.','')));$image_arr[$k]['h'] = intval($row_height);}$result = [];$tmp_width = 0;$i = 0;foreach($image_arr as $k=>$image){if($row_width < ($tmp_width + $image['w'] + $space_width)){if(abs($row_width - ($tmp_width + $image['w'] + $space_width)) > $row_height){$count = count($result[$i]);//一组图片数量//当前组图片累计的宽度 与 预设行宽 之比$ratio = number_format(($tmp_width-$count*$space_width)/($row_width-($count+1)*$space_width),2,'.','');/** 调整该组图片应设行高*/$tmp_height = intval(300 / $ratio);$width = 0;foreach( $result[$i] as $index => $val){$result[$i][$index]['h'] = $tmp_height;$result[$i][$index]['w'] = intval($val['w'] * ($tmp_height / $val['h']));$width += $result[$i][$index]['w'] + $space_width;}$over_width = $row_width - intval($width + $space_width);//当前行宽误差$result[$i][$index]['w'] += $over_width;//消除误差$tmp_width = 0;$i ++;//接下来的图放入下行}}$result[$i][] = $image;$tmp_width += $image['w'] + $space_width;//记录新宽度}return $result;

木桶布局原理与实现相关推荐

html木桶布局,木桶布局实现
百度图片图片来自百度图片像这样高度一样,而宽度不同的布局方式称之为木桶布局.它有几个鲜明的特点: 每行的图片高度一致:每行的图片都是占满的. 如何实现木桶布局之整体思路我们需要先拥有一些素 ...
代码修炼之路——木桶布局
这篇文章主要围绕以下三件事展开. 讲解木桶布局的原理. 把这个效果做成个UI 精美.功能完善的小项目. 通过这个项目,演示如何去思考.如何去优化代码. 木桶布局原理假设我们手里有20张照片,这些照片 ...
代码修炼之路-木桶布局
这篇文章我们主要做三件事讲解木桶布局的原理把这个效果做成个UI 精美.功能完善的小项目通过这个项目,演示如何去思考.如何去优化代码木桶布局原理假设我们手里有20张照片,这些照片可以在保持宽高 ...
拆！对比详解 Flutter Widget 和 CSS，你关心的布局原理都在这儿了
简介: 这篇文章专门对比 Flutter Widget 的布局原理和 CSS 布局原理的差异,分享在对接过程中会遇到的问题和解决方案,帮大家理一理思路,内容可以分为这几部分:1.CSS 和 Widge ...
flutter listview 滚动到指定位置_Flutter 布局原理及实战
1. Flutter UI架构 Flutter将视图数据抽象成为三个部分,即Widget树.Element树和RenderObject树. Widget树:控件的配置信息,不涉及渲染,更新代价极低. ...
html木桶布局,CSS3如何实现图片木桶布局？（附代码）
本篇文章给大家通过代码示例介绍一下使用CSS3实现图片木桶布局的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 高度相同,而宽度不一样的布局,称之为木桶布局.它有几个鲜明的特点 ...
element-UI响应式（布局原理）讲解 - 贴文篇
element-UI响应式(原理)- 讲解 element-UI官方说明:响应式布局参照了 Bootstrap 的响应式设计,预设了五个响应尺寸:xs.sm.md.lg 和 xl. Element ...
Android布局原理与优化
Android布局原理与优化目录: 绘制原理 CPU与GPU Android 图形系统的整体架构 RenderThread 硬件加速和软件绘制 invalidate软件绘制流程 invalidate ...
html九宫格布局原理,了解CSS九宫格布局的几大实现方法
九宫格布局在制作一些Web App时还是经常可以用到的,本篇文章带大家了解一下CSS九宫格布局的几大实现方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 前提说明除非特别说明, ...

木桶布局原理与实现