Skip to content


Subversion checkout URL

You can clone with
Download ZIP
The waterfall (i.e., Pinterest-like) layout for UICollectionView.
Objective-C Swift Ruby
Latest commit 2b0c349 @chiahsien Update


Version Platform Build Status

CHTCollectionViewWaterfallLayout is a subclass of UICollectionViewLayout, and it trys to imitate UICollectionViewFlowLayout's usage as much as possible.

This layout is inspired by Pinterest. It also is compatible with PSTCollectionView.

Screen Shots

2 columns


  • Easy to use, it trys to imitate UICollectionViewFlowLayout's usage as much as possible.
  • Highly customizable.
  • Outstanding performance, try 10,000+ items and see the smoothness for yourself.
  • Support header and footer views.
  • Different column counts in different sections.


  • ARC
  • Xcode 4.4+, which supports literals syntax.
  • iOS 6+, or
  • iOS 4.x/5.x, with PSTCollectionView.

How to install

  • CocoaPods
    Add pod 'CHTCollectionViewWaterfallLayout' to your podfile.
  • Manual
    Copy CHTCollectionViewWaterfallLayout.h/m to your project.

How to Use

Read the demo codes and CHTCollectionViewWaterfallLayout.h header file for more information.

Step 1

Below lists the properties for you to customize the layout. Although they have default values, I strongly recommand you to set up at least the columnCount property to suit your needs. The itemRenderDirection property is an enum which decides the order in which your items will be rendered in subsequent rows. For eg. Left-Right | Right-Left | Shortest column filling up first.

@property (nonatomic, assign) NSInteger columnCount;
@property (nonatomic, assign) CGFloat minimumColumnSpacing;
@property (nonatomic, assign) CGFloat minimumInteritemSpacing;
@property (nonatomic, assign) CGFloat headerHeight;
@property (nonatomic, assign) CGFloat footerHeight;
@property (nonatomic, assign) UIEdgeInsets sectionInset;
@property (nonatomic, assign) ItemRenderDirection itemRenderDirection;

Step 2

Your collection view's delegate (which often is your view controller) must conforms to CHTCollectionViewDelegateWaterfallLayout protocol and implements the required method, all you need to do is return the original size of the item:

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;

Step 3 (Optional)

If you need to support iOS 4.x/5.x and you have installed PSTCollectionView, then you NEED to modify some codes.

Quoted from PSTCollectionView README file:

If you want to have PSTCollectionView on iOS4.3/5.x and UICollectionView on iOS6, use PSUICollectionView (basically add PS on any UICollectionView* class to get auto-support for older iOS versions) If you always want to use PSTCollectionView, use PSTCollectionView as class names. (replace the UI with PST)


  • Only vertical scrolling is supported.
  • No decoration view.

Who is using it

Please let me know if your app is using this library. I'm glad to put your app on the list :-)

  • F3PiX
    F3PiX is a series of apps which gives you a concise, curated collection of pictures by professional (Dutch) photographers according to a specific theme. You can use the pictures freely for your own work.
  • GroupMe for iOS
    GroupMe - A Home for All the Groups in Your Life.
  • Flickr
    Access and organize your photos from anywhere.
  • Tumblr
    Post whatever you want to your Tumblr. Follow other people who are doing the same. You’ll probably never be bored again.
  • Funliday
    The best trip planning app in the world!
  • Imgur
    Funny GIFs, Memes, and Images!


CHTCollectionViewWaterfallLayout is available under the MIT license. See the LICENSE file for more info.


Refer to the Releases page.

Something went wrong with that request. Please try again.