iOS 兩種方式實現瀑布流效果劍客篇(歡迎提建議和分享經驗)

一般來說瀑布流主要有兩種實現方式。方法一：使用UITableView。方法二：使用UIScrollView。
先介紹方法一（也是官方推薦的方式）
1. 總先做成幾列是事先要清楚，有多少條記錄。
2. 假設要做成3列，就用三個uitableview，寬度平均，高度動態，頁面高度取uitableview中最高的。
3. 三個uitableview初始化的時候用到tag（我越來越覺得tag在ios中的用處很大，就像js中讀取html控件中的id一樣），然後 showsVerticalScrollIndicator和scrollEnabled設爲no，separatorStyle設爲 UITableViewCellSeparatorStyleNone，添加到UIview中。
獲取高度

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section 


{ 
     

return 當行記錄數/列;


} 


- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{ 
  

int  arrIndex=  當前indexPath.row * 列(3)＋當前indexPath.column;| 
   

return [[XML/JSON objectAtIndex:arrIndex] objectForKey:@"高度"]; 
} 


- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{ 
 

//從數據源中得到當前數組對應的數據，然後再用uitableviewcell填充 


｝

詳細實現請參照：http://www.oschina.net/code/snippet_730880_16275

方法一實現起來相對比較簡單。但是也有些弊端：1，要操作三個UITableView，定位當前點中的cell比較麻煩。2.cell中的圖片都是等高。在現實中圖片大小是不一樣的，有高有低。這個也是方法一很多的侷限性 。所以推薦方法二。

方法二：
   原理：在 UIScrollView上根據圖片大小放置圖片。這裏就有兩個問題：1.如何計算每張圖片的起始位置。2.從性能考慮如何節省內存？這就需要一個cell的重用機制。
如果自己從頭寫，有如下的一些步驟：
   1.基類是一個UIScrollView. 都是在此基礎上操作。
   2. 有些是直接使用cell(此cell非UITableVie中的cell，這裏類似一個UIView)；有些再加一層UITableView（此步驟其實有點多餘）。
   3. 從網絡中或配置文件獲取圖片的相關信息（title，width，height ,url等）。
   4.根據圖片相關信息，計算好UIView的起始位置並保存內存中（注意邊界）。
   5.reloadData,開始繪製cell(有網絡請求，就使用SDWebImag庫獲取圖片)。
   6.若觸發手勢（輕掃，上下拖動）再繪製時是否有重用的cell（這些都是保存在內存中的）。
 呵呵，上述6步是大概。沒有什麼實際作用（自己覺得）。就當我費話說了。
下面利用一個開源的庫。提供個有效的demo（不然自己心裏都過不去）
  原地址：https://github.com/1000Memories/TMQuiltView
我在他基礎上修改了下。
建立一個TestQuiltView工程。
拷貝以下文件並加入工程。
  TMPhotoQuiltViewCell.h  
 TMPhotoQuiltViewCell.m
 TMQuiltView.h 
 TMQuiltView.m
TMQuiltViewCell.h
TMQuiltViewCell.m

調用文件

 //myTMQuiltViewController.h
 
  #import <UIKit/UIKit.h>
#import "TMQuiltView.h"
#import "TMPhotoQuiltViewCell.h"

@interface myTMQuiltViewController : UIViewController <TMQuiltViewDataSource,TMQuiltViewDelegate> {
    
}

@property(strong,nonatomic)TMQuiltView *quiltView;
@property(strong,nonatomic)NSArray *images;
@end

 //myTmQuiltViewController.m

#import "myTMQuiltViewController.h"

@interface myTMQuiltViewController ()

@end

#define kNumberOfCells           1000

@implementation myTMQuiltViewController

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
    }
    return self;
}

- (void)dealloc {
    [_quiltView release];
    _quiltView = nil;
    
    [_images release];
    _images = nil;
    [super dealloc];
}
- (void)viewDidLoad
{
    [super viewDidLoad];
    _quiltView = [[TMQuiltView alloc] initWithFrame:self.view.bounds];
    _quiltView.dataSource = self;
    _quiltView.delegate = self;
    [self.view addSubview:_quiltView];
    
    [_quiltView reloadData];
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}


#pragma mark - QuiltViewControllerDataSource

- (NSArray *)images {
    if (!_images) {
        NSMutableArray *imageNames = [NSMutableArray array];
        for(int i = 0; i < kNumberOfCells; i++) {
            [imageNames addObject:[NSString stringWithFormat:@"%d.jpeg", i % 10 + 1]];
        }
        _images = [imageNames retain];
    }
    return _images;
}

- (UIImage *)imageAtIndexPath:(NSIndexPath *)indexPath {
    return [UIImage imageNamed:[self.images objectAtIndex:indexPath.row]];
}

- (NSInteger)quiltViewNumberOfCells:(TMQuiltView *)TMQuiltView {
    return [self.images count];
}

- (TMQuiltViewCell *)quiltView:(TMQuiltView *)quiltView cellAtIndexPath:(NSIndexPath *)indexPath {
    TMPhotoQuiltViewCell *cell = (TMPhotoQuiltViewCell *)[quiltView dequeueReusableCellWithReuseIdentifier:@"PhotoCell"];
    if (!cell) {
        cell = [[[TMPhotoQuiltViewCell alloc] initWithReuseIdentifier:@"PhotoCell"] autorelease];
    }
    
    cell.photoView.image = [self imageAtIndexPath:indexPath];
    cell.titleLabel.text = [NSString stringWithFormat:@"%d", indexPath.row + 1];
    return cell;
}

#pragma mark - TMQuiltViewDelegate

- (NSInteger)quiltViewNumberOfColumns:(TMQuiltView *)quiltView {
    return 2;
}

- (CGFloat)quiltView:(TMQuiltView *)quiltView heightForCellAtIndexPath:(NSIndexPath *)indexPath {
    return [self imageAtIndexPath:indexPath].size.height / [self quiltViewNumberOfColumns:quiltView];
}
@end

在main中
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
 _mytmquitviewcontroller = [[myTMQuiltViewController alloc] initWithNibName:nil bundle:nil];
    [_mytmquitviewcontroller.view setBackgroundColor:[UIColor clearColor]];
    [_window.rootViewController ＝_mytmquitviewcontroller;
｝

demo: http://download.csdn.net/detail/nogodoss/5238598

以上兩種方法都是有點舊了，但是效果還算可以，大家有什麼更好的可以推薦，有什麼問題和建議直接評論