瀑布流/流水布局的解决方案

Posted 2022-09-23 zhengweifang

1.最近做的一个项目用到了流水布局,简单粗暴,找了个demo放进去.刚开始静态页面感觉还不错.

demo: http://www.cocoachina.com/ios/20160407/15872.html

 

demo图

最关键的是图片下面还有4个label和一个imageView, 修改demo里的原始布局,让图片和文字高度自适应

图片和文字都没设置高度.

问题一:加载网络图片的时候,下拉刷新,图片高度和文字高度发生变化.

解决方案:计算文字的高度,文字高度固定后,刷新时布局不会发生改变.

计算文字高度方法:

/*

@param width限制字符串显示区域的宽度

@result float返回的高度

*/

CGSizetitleSize = [textboundingRectWithSize:CGSizeMake(width,MAXFLOAT)options:NSStringDrawingUsesLineFragmentOriginattributes:@NSFontAttributeName:[UIFontsystemFontOfSize:12]context:nil].size;

问题二:图片宽高到底是客户端计算呢?还是服务端获取呢.我更倾向于服务器获取,这对强大的服务器来说应该是小菜. 但是不知道怎么回事,可能是服务器配置太渣,后台一加入获取宽高的函数就接口就请求超时,这搞得我非常郁闷,最后还是客户端自己下载图片获取宽高吧.

下载图片的方法:

[SDWebImageManager.sharedManagerloadImageWithURL:[NSURLURLWithString:model.view]options:SDWebImageRetryFailedprogress:nilcompleted:^(UIImage*_Nullableimage,NSData*_Nullabledata,NSError*_Nullableerror,SDImageCacheTypecacheType,BOOLfinished,NSURL*_NullableimageURL)

];

不过还存在瑕疵:宽高需要赋初始值.不然会卡住,一进入界面,由于图片没有下载下来导致显示的图片高度不是真实高度.

最终的实现的效果是: