转载:

屎壳郎情调-成长日记

首先要知道:瀑布流的核心就是要获取到图片的长宽

网上的很多例子都是加载本地图片的 对于新手而言 改成加载网络图片的确是有点压力的  因为本地的图片 我们是很容易就能获取到他的 长宽的 但是网络图片的话 我们只能是先加载图片 然后得到他的长宽 这个时候就涉及到 异步加载图片的问题了  我们现在的思路是 获取网络图片地址 然后 开辟线程来加载该地址的图片 从而获取他的长宽

  1. #import "shopRViewController.h"
  2. #import "TMQuiltView.h"
  3.  
  4. #import "TMPhotoQuiltViewCell.h"
  5.  
  6. @interface shopRViewController ()<TMQuiltViewDataSource,TMQuiltViewDelegate>
  7. {
  8. TMQuiltView *qtmquitView;
  9. }
  10. @property (nonatomic, retain) NSMutableArray *images;
  11. @end
  12.  
  13. @implementation shopRViewController
  14.  
  15. @synthesize images = _images;
  16.  
  17. - (void)viewDidLoad
  18. {
  19. [super viewDidLoad];
  20. [self.view setBackgroundColor:[[UIColor grayColor] colorWithAlphaComponent:0.2]];
  21. //请求数据
  22. self.factory = [[DataFactory alloc] initDataWithUrlString:ChanPinTuiJianHttpUrl vHttpMethod:@"post"];
  23. self.factory.delegate = self;
  24. qtmquitView = [[TMQuiltView alloc] initWithFrame:CGRectMake(, , , )];
  25. qtmquitView.delegate = self;
  26. qtmquitView.dataSource = self;
  27.  
  28. [self.view addSubview:qtmquitView];
  29.  
  30. // [self createHeaderView];
  31. // [self performSelector:@selector(testFinishedLoadData) withObject:nil afterDelay:0.0f];
  32.  
  33. }
  34. //解析数据
  35. -(void)JsonDataDictionaryDetail:(NSMutableDictionary *)dataDic
  36. {
  37. self.arrayHeight = [[NSMutableArray alloc] initWithCapacity:];
  38. self.arrayWidth = [[NSMutableArray alloc] initWithCapacity:];
  39. @try {
  40. if(dataDic!=nil)
  41. {
  42. if(self.arrayProductDetail==nil)
  43. {
  44. self.arrayProductDetail = [[NSMutableArray alloc] initWithCapacity:];
  45.  
  46. }
  47. else
  48. {
  49. [self.arrayProductDetail removeAllObjects];
  50. [self.arrCopy removeAllObjects];
  51. }
  52. for (int i = ; i<[[dataDic objectForKey:@"data"] count]; i++) {
  53. ProdectDetail *p = [[ProdectDetail alloc] init];
  54. p.ID = [dataDic objectForKey:@"data"][i][@"id"];
  55. p.img = [dataDic objectForKey:@"data"][i][@"img"];
  56. p.title = [dataDic objectForKey:@"data"][i][@"title"];
  57. p.marketprice = [NSString stringWithFormat:@"%.2f",[[dataDic objectForKey:@"data"][i][@"marketprice"] floatValue]];
  58. p.sellprice =[NSString stringWithFormat:@"%.2f",[[dataDic objectForKey:@"data"][i][@"sellprice"] floatValue]];
  59. p.guige = [dataDic objectForKey:@"data"][i][@"guige"];
  60. p.hots = [dataDic objectForKey:@"data"][i][@"hots"];
  61. [self.arrayProductDetail addObject:p];
  62. //开辟线程来加载图片
  63. [self performSelectorInBackground:@selector(backgr:) withObject:p];
  64. }
  65. self.arrCopy = [NSMutableArray arrayWithArray:self.arrayProductDetail];
  66.  
  67. }
  68. else
  69. {
  70. [self Msg:@"当前无网络连接!"];
  71. }
  72.  
  73. }
  74. @catch (NSException *exception) {
  75.  
  76. }
  77.  
  78. [qtmquitView reloadData];
  79. }
  80. //线程加载图片获取 长 宽
  81. -(void)backgr:(ProdectDetail *)p
  82. {
  83. NSURL *url = [NSURL URLWithString:p.img];
  84. UIImage *imga = [[UIImage alloc] initWithData:[NSData dataWithContentsOfURL:url]];
  85. [self.arrayWidth addObject:[NSString stringWithFormat:@"%f",imga.size.width]];
  86. [self.arrayHeight addObject:[NSString stringWithFormat:@"%f",imga.size.height]];
  87. //更新主线程
  88. [self performSelectorOnMainThread:@selector(updateMain) withObject:nil waitUntilDone:NO];
  89. }
  90. //刷新主线程做的事情
  91. -(void)updateMain
  92. {
  93. //主线层要做的事情就是刷新布局
  94. //刷新布局
  95. [qtmquitView reloadData];
  96. }
  97.  
  98. //cell的个数
  99. - (NSInteger)quiltViewNumberOfCells:(TMQuiltView *)TMQuiltView {
  100. return self.arrayWidth.count;//注意 这个count要跟 子线程里面的组数个数一致 (之前越界了 原来问题处在这里)
  101. }
  102. //cell事件
  103. - (TMQuiltViewCell *)quiltView:(TMQuiltView *)quiltView cellAtIndexPath:(NSIndexPath *)indexPath {
  104. TMPhotoQuiltViewCell *cell = (TMPhotoQuiltViewCell *)[quiltView dequeueReusableCellWithReuseIdentifier:@"PhotoCell"];
  105. if (!cell) {
  106. cell = [[[TMPhotoQuiltViewCell alloc] initWithReuseIdentifier:@"PhotoCell"] autorelease];
  107. }
  108. ProdectDetail *p = [self.arrayProductDetail objectAtIndex:indexPath.row];
  109. // cell.photoView.image = [self imageAtIndexPath:indexPath];
  110. [cell.photoView setImageWithURL:[NSURL URLWithString:p.img]];
  111. [cell.titleLabel setFont:[UIFont systemFontOfSize:]];
  112. [cell.headLabel setTextColor:[UIColor orangeColor]];
  113. cell.headLabel.text = [NSString stringWithFormat:@"¥ %@",p.sellprice];
  114. cell.titleLabel.text = [NSString stringWithFormat:@"%@%d",p.title, indexPath.row];
  115. return cell;
  116. }
  117.  
  118. #pragma mark - TMQuiltViewDelegate
  119. //设备旋转
  120. - (NSInteger)quiltViewNumberOfColumns:(TMQuiltView *)quiltView {
  121.  
  122. if ([[UIDevice currentDevice] orientation] == UIDeviceOrientationLandscapeLeft
  123. || [[UIDevice currentDevice] orientation] == UIDeviceOrientationLandscapeRight)
  124. {
  125. return ;
  126. } else {
  127. return ;
  128. }
  129. }
  130. //cell高度 这个是关键点
  131. - (CGFloat)quiltView:(TMQuiltView *)quiltView heightForCellAtIndexPath:(NSIndexPath *)indexPath
  132. {
  133.  
  134. if(self.arrayHeight.count>)
  135. {
  136. float cell_height = 0.9*viewWidth/*[[self.arrayHeight objectAtIndex:indexPath.row] floatValue]/[[self.arrayWidth objectAtIndex:indexPath.row] floatValue];
  137.  
  138. return cell_height;
  139. }
  140. }
  141. //选中事件要做的事情
  142. - (void)quiltView:(TMQuiltView *)quiltView didSelectCellAtIndexPath:(NSIndexPath *)indexPath
  143. {
  144. NSLog(@"index:%d",indexPath.row);
  145. }
  146.  
  147. - (void)didReceiveMemoryWarning
  148. {
  149. [super didReceiveMemoryWarning];
  150. // Dispose of any resources that can be recreated.
  151. }
  152.  
  153. @end

demo使用注意点:

  1.  
  2. 使用方法
  3.  
  4. TMQuiltView.m里面 修改间距
  5.  
  6. constCGFloat kTMQuiltViewDefaultMargin = 5.0f; //修改间距
  7.  
  8. 修改Cell的布局样式 TMPhotoQuiltViewCell.m里面 添加布局样式
  9.  
  10. 添加布局
  11.  
  12. /
  13.  
  14. #import "TMPhotoQuiltViewCell.h"
  15.  
  16. constCGFloat kTMPhotoQuiltViewMargin = ;
  17.  
  18. @implementation TMPhotoQuiltViewCell
  19.  
  20. @synthesize photoView =_photoView;
  21.  
  22. @synthesize titleLabel =_titleLabel;
  23.  
  24. - (void)dealloc {
  25.  
  26. [_photoView release], _photoView =nil;
  27.  
  28. [_titleLabel release], _titleLabel =nil;
  29.  
  30. [superdealloc];
  31.  
  32. }
  33.  
  34. - (id)initWithReuseIdentifier:(NSString *)reuseIdentifier
  35.  
  36. {
  37.  
  38. self = [superinitWithReuseIdentifier:reuseIdentifier];
  39.  
  40. if (self) {
  41.  
  42. self.backgroundColor = [UIColorwhiteColor];
  43.  
  44. }
  45.  
  46. return self;
  47.  
  48. }
  49.  
  50. - (UIImageView *)photoView {
  51.  
  52. if (!_photoView) {
  53.  
  54. _photoView = [[UIImageViewalloc] init];
  55.  
  56. _photoView.contentMode =UIViewContentModeScaleAspectFill;
  57.  
  58. _photoView.clipsToBounds =YES;
  59.  
  60. [selfaddSubview:_photoView];
  61.  
  62. }
  63.  
  64. return_photoView;
  65.  
  66. }
  67.  
  68. //
  69.  
  70. //注意 添加的的布局一定要你写成这样 get set 形式否则会闪屏
  71.  
  72. //
  73.  
  74. //
  75.  
  76. - (UILabel *)titleLabel {
  77.  
  78. if (!_titleLabel) {
  79.  
  80. _titleLabel = [[UILabelalloc] init];
  81.  
  82. _titleLabel.backgroundColor = [[UIColorblackColor] colorWithAlphaComponent:0.5];
  83.  
  84. _titleLabel.textColor = [UIColorwhiteColor];
  85.  
  86. _titleLabel.textAlignment =UITextAlignmentCenter;
  87.  
  88. [selfaddSubview:_titleLabel];
  89.  
  90. }
  91.  
  92. return_titleLabel;
  93.  
  94. }
  95.  
  96. //布局
  97.  
  98. - (void)layoutSubviews {
  99.  
  100. self.photoView.frame =CGRectInset(self.bounds,kTMPhotoQuiltViewMargin, kTMPhotoQuiltViewMargin);
  101.  
  102. //下标题
  103.  
  104. self.titleLabel.frame =CGRectMake(kTMPhotoQuiltViewMargin,self.bounds.size.height - - kTMPhotoQuiltViewMargin,
  105.  
  106. self.bounds.size.width - * kTMPhotoQuiltViewMargin,);
  107.  
  108. }

@end

demo下载地址 (加载本地图片的)

http://download.csdn.net/detail/aa741649143/6518895

ios 瀑布流的那些事情的更多相关文章

  1. IOS 瀑布流UICollectionView实现

    IOS 瀑布流UICollectionView实现 在实现瀑布流之前先来看看瀑布流的雏形(此方法的雏形 UICollectionView) 对于UICollectionView我们有几点注意事项 它和 ...

  2. iOS 瀑布流之栅格布局

    代码地址如下:http://www.demodashi.com/demo/14760.html 一 .效果预览 二.确定需求 由下面的需求示意图可知模块的最小单位是正方形,边长是屏幕宽除去边距间隔后的 ...

  3. iOS 瀑布流封装

    代码地址如下:http://www.demodashi.com/demo/12284.html 一.效果预览 功能描述:WSLWaterFlowLayout 是在继承于UICollectionView ...

  4. IOS 瀑布流

    本篇博客应该算的上CollectionView的高级应用了,从iOS开发之窥探UICollectionViewController(一)到今天的(五),可谓是由浅入深的窥探了一下UICollectio ...

  5. iOS瀑布流实现(Swift)

    这段时间突然想到一个很久之前用到的知识-瀑布流,本来想用一个简单的方法,发现自己走入了歧途,最终只能狠下心来重写UICollectionViewFlowLayout.下面我将用两种方法实现瀑布流,以及 ...

  6. iOS 瀑布流的Demo

    /** * 瀑布流Demo的主要代码,若想看完整的代码请到下面链接去下载 * * 链接: https://pan.baidu.com/s/1slByAHB 密码: r3q6 */ #import &l ...

  7. iOS 瀑布流的基本原理

    /** * 源代码链接 * 链接: https://pan.baidu.com/s/1nvLamEX 密码: kya5 */ #import <UIKit/UIKit.h> @interf ...

  8. ios瀑布流

    http://blog.csdn.net/shenjx1225/article/details/9037631

  9. iOS开发笔记15:地图坐标转换那些事、block引用循环/weak–strong dance、UICollectionviewLayout及瀑布流、图层混合

    1.地图坐标转换那些事 (1)投影坐标系与地理坐标系 地理坐标系使用三维球面来定义地球上的位置,单位即经纬度.但经纬度无法精确测量距离戒面积,也难以在平面地图戒计算机屏幕上显示数据.通过投影的方式可以 ...

随机推荐

  1. SQLSERVER存储过程的基本语法实例

    SQLSERVER存储过程的基本语法实例 SQLSERVER存储过程的基本语法实例 一.定义变量--简单赋值 declare @a intset @a=5 print @a --使用select语句赋 ...

  2. C++性能优化笔记

    最近着手去优化项目中一个模块的性能.该模块是用C++实现,对大量文本数据进行处理. 一开始时,没什么思路,因为不知道性能瓶颈在哪里.于是借助perf工具来对程序进行分析,找出程序的性能都消耗在哪里了. ...

  3. django+xadmin在线教育平台(二)

    老话总是没错的,工欲善其事,必先利其器 教你安装pycharm,mysql,navicat,python相关环境. windows下搭建开发环境 2-1 pycharm,mysql,Navicat安装 ...

  4. 5-2 os模块

    导入os模块 import os res = os.listdir('D:\study') # 列出某个目录下的所有文件 os.remove('newuser.json') # 删除某个目录下的某个文 ...

  5. 爬虫进阶之Selenium和chromedriver,动态网页(Ajax)数据抓取

    什么是Ajax: Ajax(Asynchronouse JavaScript And XML)异步JavaScript和XML.过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新.这意 ...

  6. 数据存储之使用mysql数据库存储数据

    推荐安装mysql5.7环境: 官网下载:https://dev.mysql.com/downloads/installer/5.7.html 如果提示没有.NET Framework框架.那么就在提 ...

  7. JZOJ 5773. 【NOIP2008模拟】简单数学题

    5773. [NOIP2008模拟]简单数学题 (File IO): input:math.in output:math.out Time Limits: 1000 ms  Memory Limits ...

  8. 43.VUE学习之--组件之使用.sync修饰符与computed计算属性超简单的实现美团购物车原理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Oracle 数据库密码过期问题

    (1)在CMD命令窗口中输入:           sqlplus 用户名/密码@数据库本地服务名 as sysdba;(如:sqlplus scott/1234@oracle1 as sysdba; ...

  10. Memory loss【记忆缺失】

    Memory Loss Losing your ability to think and remember is pretty scary. We know the risk of dementia ...