ios 瀑布流的那些事情

转载：

屎壳郎情调-成长日记

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

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

 #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(, , , )];
    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:];
     self.arrayWidth = [[NSMutableArray alloc] initWithCapacity:];
    @try {
        if(dataDic!=nil)
        {
            if(self.arrayProductDetail==nil)
            {
                self.arrayProductDetail = [[NSMutableArray alloc] initWithCapacity:];

            }
            else
            {
                [self.arrayProductDetail removeAllObjects];
                [self.arrCopy removeAllObjects];
            }
            for (int i = ; 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:]];
    [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 ;
    } else {
        return ;
    }
}
//cell高度  这个是关键点
- (CGFloat)quiltView:(TMQuiltView *)quiltView heightForCellAtIndexPath:(NSIndexPath *)indexPath
{

    if(self.arrayHeight.count>)
    {
        float cell_height = 0.9*viewWidth/*[[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 = ;

@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 -  - kTMPhotoQuiltViewMargin,

                                      self.bounds.size.width - * kTMPhotoQuiltViewMargin,);

}

@end

demo下载地址 （加载本地图片的）

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