首先要知道:瀑布流的核心就是要获取到图片的长宽
网上的很多例子都是加载本地图片的 对于新手而言 改成加载网络图片的确是有点压力的 因为本地的图片 我们是很容易就能获取到他的 长宽的 但是网络图片的话 我们只能是先加载图片 然后得到他的长宽 这个时候就涉及到 异步加载图片的问题了 我们现在的思路是 获取网络图片地址 然后 开辟线程来加载该地址的图片 从而获取他的长宽
#import "shopRViewController.h"
#import "TMQuiltView.h"
#import "TMPhotoQuiltViewCell.h"
@interface shopRViewController ()<TMQuiltViewDataSource,TMQuiltViewDelegate>
{
TMQuiltView *qtmquitView;
}
@property (nonatomic, retain) NSMutableArray *images;
@end
@implementation shopRViewController
@synthesize images = _images;
- (void)viewDidLoad
{
[super viewDidLoad];
[self.view setBackgroundColor:[[UIColor grayColor] colorWithAlphaComponent:0.2]];
//请求数据
self.factory = [[DataFactory alloc] initDataWithUrlString:ChanPinTuiJianHttpUrl vHttpMethod:@"post"];
self.factory.delegate = self;
qtmquitView = [[TMQuiltView alloc] initWithFrame:CGRectMake(0, 0, 1024, 768)];
qtmquitView.delegate = self;
qtmquitView.dataSource = self;
[self.view addSubview:qtmquitView];
// [self createHeaderView];
// [self performSelector:@selector(testFinishedLoadData) withObject:nil afterDelay:0.0f];
}
//解析数据
-(void)JsonDataDictionaryDetail:(NSMutableDictionary *)dataDic
{
self.arrayHeight = [[NSMutableArray alloc] initWithCapacity:1];
self.arrayWidth = [[NSMutableArray alloc] initWithCapacity:1];
@try {
if(dataDic!=nil)
{
if(self.arrayProductDetail==nil)
{
self.arrayProductDetail = [[NSMutableArray alloc] initWithCapacity:1];
}
else
{
[self.arrayProductDetail removeAllObjects];
[self.arrCopy removeAllObjects];
}
for (int i = 0; i<[[dataDic objectForKey:@"data"] count]; i++) {
ProdectDetail *p = [[ProdectDetail alloc] init];
p.ID = [dataDic objectForKey:@"data"][i][@"id"];
p.img = [dataDic objectForKey:@"data"][i][@"img"];
p.title = [dataDic objectForKey:@"data"][i][@"title"];
p.marketprice = [NSString stringWithFormat:@"%.2f",[[dataDic objectForKey:@"data"][i][@"marketprice"] floatValue]];
p.sellprice =[NSString stringWithFormat:@"%.2f",[[dataDic objectForKey:@"data"][i][@"sellprice"] floatValue]];
p.guige = [dataDic objectForKey:@"data"][i][@"guige"];
p.hots = [dataDic objectForKey:@"data"][i][@"hots"];
[self.arrayProductDetail addObject:p];
//开辟线程来加载图片
[self performSelectorInBackground:@selector(backgr:) withObject:p];
}
self.arrCopy = [NSMutableArray arrayWithArray:self.arrayProductDetail];
}
else
{
[self Msg:@"当前无网络连接!"];
}
}
@catch (NSException *exception) {
}
[qtmquitView reloadData];
}
//线程加载图片获取 长 宽
-(void)backgr:(ProdectDetail *)p
{
NSURL *url = [NSURL URLWithString:p.img];
UIImage *imga = [[UIImage alloc] initWithData:[NSData dataWithContentsOfURL:url]];
[self.arrayWidth addObject:[NSString stringWithFormat:@"%f",imga.size.width]];
[self.arrayHeight addObject:[NSString stringWithFormat:@"%f",imga.size.height]];
//更新主线程
[self performSelectorOnMainThread:@selector(updateMain) withObject:nil waitUntilDone:NO];
}
//刷新主线程做的事情
-(void)updateMain
{
//主线层要做的事情就是刷新布局
//刷新布局
[qtmquitView reloadData];
}
//cell的个数
- (NSInteger)quiltViewNumberOfCells:(TMQuiltView *)TMQuiltView {
return self.arrayWidth.count;//注意 这个count要跟 子线程里面的组数个数一致 (之前越界了 原来问题处在这里)
}
//cell事件
- (TMQuiltViewCell *)quiltView:(TMQuiltView *)quiltView cellAtIndexPath:(NSIndexPath *)indexPath {
TMPhotoQuiltViewCell *cell = (TMPhotoQuiltViewCell *)[quiltView dequeueReusableCellWithReuseIdentifier:@"PhotoCell"];
if (!cell) {
cell = [[[TMPhotoQuiltViewCell alloc] initWithReuseIdentifier:@"PhotoCell"] autorelease];
}
ProdectDetail *p = [self.arrayProductDetail objectAtIndex:indexPath.row];
// cell.photoView.image = [self imageAtIndexPath:indexPath];
[cell.photoView setImageWithURL:[NSURL URLWithString:p.img]];
[cell.titleLabel setFont:[UIFont systemFontOfSize:15]];
[cell.headLabel setTextColor:[UIColor orangeColor]];
cell.headLabel.text = [NSString stringWithFormat:@"¥ %@",p.sellprice];
cell.titleLabel.text = [NSString stringWithFormat:@"%@%d",p.title, indexPath.row];
return cell;
}
#pragma mark - TMQuiltViewDelegate
//设备旋转
- (NSInteger)quiltViewNumberOfColumns:(TMQuiltView *)quiltView {
if ([[UIDevice currentDevice] orientation] == UIDeviceOrientationLandscapeLeft
|| [[UIDevice currentDevice] orientation] == UIDeviceOrientationLandscapeRight)
{
return 3;
} else {
return 4;
}
}
//cell高度 这个是关键点
- (CGFloat)quiltView:(TMQuiltView *)quiltView heightForCellAtIndexPath:(NSIndexPath *)indexPath
{
if(self.arrayHeight.count>0)
{
float cell_height = 0.9*viewWidth/4*[[self.arrayHeight objectAtIndex:indexPath.row] floatValue]/[[self.arrayWidth objectAtIndex:indexPath.row] floatValue];
return cell_height;
}
}
//选中事件要做的事情
- (void)quiltView:(TMQuiltView *)quiltView didSelectCellAtIndexPath:(NSIndexPath *)indexPath
{
NSLog(@"index:%d",indexPath.row);
}
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
demo使用注意点:
使用方法
在TMQuiltView.m里面 修改间距
constCGFloat kTMQuiltViewDefaultMargin = 5.0f; //修改间距
修改Cell的布局样式 在 TMPhotoQuiltViewCell.m里面 添加布局样式
添加布局
/
#import "TMPhotoQuiltViewCell.h"
constCGFloat kTMPhotoQuiltViewMargin = 5;
@implementation TMPhotoQuiltViewCell
@synthesize photoView =_photoView;
@synthesize titleLabel =_titleLabel;
- (void)dealloc {
[_photoView release], _photoView =nil;
[_titleLabel release], _titleLabel =nil;
[superdealloc];
}
- (id)initWithReuseIdentifier:(NSString *)reuseIdentifier
{
self = [superinitWithReuseIdentifier:reuseIdentifier];
if (self) {
self.backgroundColor = [UIColorwhiteColor];
}
return self;
}
- (UIImageView *)photoView {
if (!_photoView) {
_photoView = [[UIImageViewalloc] init];
_photoView.contentMode =UIViewContentModeScaleAspectFill;
_photoView.clipsToBounds =YES;
[selfaddSubview:_photoView];
}
return_photoView;
}
//
//注意 添加的的布局一定要你写成这样 get set 形式否则会闪屏
//
//
- (UILabel *)titleLabel {
if (!_titleLabel) {
_titleLabel = [[UILabelalloc] init];
_titleLabel.backgroundColor = [[UIColorblackColor] colorWithAlphaComponent:0.5];
_titleLabel.textColor = [UIColorwhiteColor];
_titleLabel.textAlignment =UITextAlignmentCenter;
[selfaddSubview:_titleLabel];
}
return_titleLabel;
}
//布局
- (void)layoutSubviews {
self.photoView.frame =CGRectInset(self.bounds,kTMPhotoQuiltViewMargin, kTMPhotoQuiltViewMargin);
//下标题
self.titleLabel.frame =CGRectMake(kTMPhotoQuiltViewMargin,self.bounds.size.height - 20 - kTMPhotoQuiltViewMargin,
self.bounds.size.width -2 * kTMPhotoQuiltViewMargin,20);
}
@end