CollectionFlowLayout深度定制

从做海淘项目开始 就想着用flowlayout深度定制布局，一直懒到现在才真正算是懂了一点点皮毛，就在这里记录下来吧。效果如下(暂时还不了解如何缩小图片呀)：

首先，可以通过xib拖动控件 实现基本控件的分布

1、拖拽一个viewcontroller进来，或者直接用Main.storyboard自带的那个view controller都行

然后拖拽一个collection view 进来 设置约束 如下图：

设置layout依赖

然后依次拖拽collectionviewcell 和imageView，步骤就不赘述了

2、定制flowlayout.h 和.m文件，这里就直接上代码算了

@implementation BookListViewFlowLayout
{
CGFloat _contentWidth;
CGFloat _contentHeight;
CGFloat _commonWidth;
}

////瀑布流布局

- (void)prepareLayout {
    self.cache = ({
    _cache = [[NSMutableArray alloc]init];
    _cache;
  });
  self.numberOfColumns = 3;
  UIEdgeInsets contentInsets = self.collectionView.contentInset;
  _contentWidth = CGRectGetWidth(self.collectionView.bounds) - contentInsets.left - contentInsets.right;
  _contentHeight = 0;
  if (self.cache.isEmpty) {
    CGFloat rowWidth = (_contentWidth)/(CGFloat)self.numberOfColumns;
    CGFloat xOffset[self.numberOfColumns];
    CGFloat yOffset[self.numberOfColumns];
    NSInteger column = 0;
     for (NSInteger i=0; i

.h文件如下

#define ItemCommonWidth (CGRectGetWidth(self.collectionView.bounds) - self.collectionView.contentInset.left - self.collectionView.contentInset.right);
@protocol PinterestLayoutDelegate- (CGFloat)collectionView:(UICollectionView *)collectionView heightForPhotoAtIndexPath:(NSIndexPath *)indexpath;//- (CGFloat)collectionView:(UICollectionView *)collectionView heightForAnnotationAtIndexPath:(NSIndexPath *)indexpath width:(CGFloat)width;
@end
@interface BookListViewFlowLayout : UICollectionViewFlowLayout@property (nonatomic, assign)NSInteger numberOfColumns;
@property (nonatomic, strong)NSMutableArray * cache;@property (nonatomic, weak)idpinterestLayoutDelegate;
@end

VC代码如下

@interface BookListViewController ()@property (nonatomic, strong)NSArray * photos;
@property (nonatomic, assign)CGFloat lastContentOffset;
@end
@implementation BookListViewController
{
BOOL _scrollToRight;
}
- (void)viewDidLoad {
  [super viewDidLoad];
  self.collectionView.decelerationRate = UIScrollViewDecelerationRateNormal;
  BookListViewFlowLayout * layout = (id)self.collectionView.collectionViewLayout;
  layout.pinterestLayoutDelegate = self;
  layout.minimumLineSpacing = 6;
  self.photos = @[@"IMG_00",@"IMG_01",@"IMG_02",@"IMG_03",@"IMG_04",@"IMG_00"];
  self.collectionView.contentInset = UIEdgeInsetsMake(30, 40, 120, 40);
}
- (CGFloat)collectionView:(UICollectionView *)collectionView heightForPhotoAtIndexPath:(NSIndexPath *)indexpath {
  CGFloat aa =  arc4random()%1000;
  return aa;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
  GDCollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell"       forIndexPath:indexPath];
  cell.iconImageView.image = [UIImage imageNamed:self.photos[indexPath.item%5]];
  return cell;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
  return 100;
}

请原谅我对makdown的无知，还处于小白阶段
I'am GD