从做海淘项目开始 就想着用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<self.numberOfColumns;i++){
      CGFloat x = i*rowWidth;
      xOffset[i] = x;
    }
  for (NSInteger j = 0; j < [self.collectionView numberOfItemsInSection:0]; j++) {
  NSIndexPath * indexPath = [NSIndexPath indexPathForItem:j inSection:0];
  CGFloat photoHeight = [self.pinterestLayoutDelegate collectionView:self.collectionView           heightForPhotoAtIndexPath:indexPath];
  CGRect frame = CGRectMake(xOffset[column], yOffset[column], rowWidth, photoHeight);
  UICollectionViewLayoutAttributes * layoutAttribute = [self layoutAttributesForItemAtIndexPath:indexPath];
  layoutAttribute.frame = frame;
  _contentHeight = MAX(_contentHeight, CGRectGetMaxY(frame));
  [self.cache addObject:layoutAttribute];
  yOffset[column] += photoHeight;
  column = [self minYOffset:yOffset];
    }
  }
}
- (NSInteger)minYOffset:(CGFloat *)yOffset {
  NSInteger column = 0;
  for (int i=1; i < self.numberOfColumns; i++) {
  if (yOffset[i] < yOffset[column]) {
    column = i;
    }
  }
return column;
}
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {
    NSMutableArray * attriArray = [[NSMutableArray alloc]init];
    for (UICollectionViewLayoutAttributes * subAttribute in self.cache) {
    if (CGRectIntersectsRect(subAttribute.frame, rect)) {
      [attriArray addObject:subAttribute];
    }
  }
  return attriArray;
}
- (CGSize)collectionViewContentSize {
  return CGSizeMake(_contentWidth, _contentHeight);
}

.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