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

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) {

}];

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

最终的实现的效果是:

原文地址:https://www.cnblogs.com/zhengweifang/p/11447374.html

时间: 2024-10-07 01:17:04

瀑布流/流水布局的解决方案的相关文章

瀑布流式布局

今天终于搞懂了瀑布流式布局,哈哈,总结下 瀑布流式布局分为两种类型:1.每一列都限定宽度不限定高度的布局(使用浮动)2.宽度不是写死的,是根据页面的放大缩小变化的(定位布局) 瀑布流式布局的重点是:每个新加载的模块都应该显示在原有模块高度最小的下方 注意事项: 图片:接收到的数据在插入到文档的过程中,可能会因为图片的加载速度影响Li的最小高度,可以等图片加载完触发某个事件,再继续加载图片(还未研究出):可以设置图片的相对宽高; 什么时候鼠标滚动的时候继续加载数据:当最小高度的模块显示在文档可视区

风行一时瀑布流网页布局,实现无限加载(jquery)

今天跟大家分享一个瀑布流网页布局,先跟大家分析下实现的思路吧 主要思路:一.根据屏幕宽度和单个浮动层的宽度来确定浮动层列数 var $boxs = $("#main>div") var boxw = $boxs.eq(0).outerWidth(); var clos = Math.floor($(window).width()/boxw); $("#main").width(boxw*clos).css('margin','0 auto'); 二.用绝对定位

网站布局--瀑布流式布局

瀑布流式布局简介 现在越来越流行一种瀑布流式布局的页面布局方式,希望你没有对这个名字陌生,看张图相信你就知道它是什么了. 怎么样,是不是很熟悉,越来越多的网站采用这种布局,比如 Pinterest (貌似是最早使用这种布局的网站了),Mark之,蘑菇街,点点网,哇哦等等. 瀑布式流式布局,这个名字是很形象的,这种布局适合于小数据块,每个数据块内容相近且没有侧重.通常,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.这种布局可以说是扩展了原始的格子布局,给用户更加自由,灵活的感

JS瀑布流效果-布局

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JS瀑布流效果-布局</title> <style> * { margin: 0px; padding: 0px; } #container { position: relative; } .box { padding: 5px; float: left; } .box_img {

Android RecyclerView详解及实现瀑布流式布局

RecyclerView一个可以代替ListView和GridView的控件,那么RecyclerView到底比他们好在哪里? RecyclerView架构提供了一种插拔式的体验,所以实现了代码的高度解耦,使用起来也异常的灵活. 我们可以通过设置它的LayoutManager控制其显示的方式,通过ItemDecoration控制Item间的间隔,通过ItemAnimator控制Item的增删动画 RecyclerView.LayoutManager提供了三个实现类其中LinearLayoutMa

实现瀑布流式布局的几种方法

1.传统多列浮动 定义多个div左浮动成多列,在每个div里插入一推也是左浮动的div.于是就实现了那种参差不齐的效果. 2.直接用css3样式实现 定义一个div直接设置它的属性(column-count:列数),把那些小块div放在这个大的div中就能实现这种瀑布流效果. 但这种css3属性在一些低级浏览器可能无法实现. 3.绝对布局方式实现 实现效果最优,但最麻烦. 需要实现知道数据块高度,如果其中包含图片,需要知道图片高度: JS 动态计算数据块位置,当窗口缩放频繁,可能会狂耗性能. 具

在 JQuery Mobile 中实现瀑布流图库布局

先来看在Windows系统的1080P显示器中显示的效果: 这个整合方式几乎没有现存的实例,是自己总结出来的方法,在此记录下来. 首先访问Masonry官网下载masonry.pkgd.min.js:http://masonry.desandro.com/ 将其整合到项目中,在页面中引入. 初始化id变量,让页面每次加载时的id都不同,避免 Ajax 加载时id重复造成难以察觉的错误. var id = "gallerycontent" + Guid.NewGuid(); 采用HTML

瀑布流思路布局

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 *{ 8 margin:0; 9 padding:0; 10 } 11 ul{ 12 width:300px; 13 margin:0 15px; 14 border:1px solid #ccc; 15 floa

扩展版瀑布流

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>瀑布流-扩展版02</title> <style type="text/css"> * { margin: 0; padding: 0; } #list { list-style: none; position: relative; margin: 0 auto; }