屏幕快照 2018-01-15 上午11.40.53.png
思路:
先說一下這個效果的實現(xiàn)思路,首先需要確定該瀑布流有多少列,然后需要確定每個cell 的高度,用一個數(shù)組記錄下每一列的已添加上去的cell的高度和.然后添加下一個cell的時候找出所有列中高度最小的列,再添加上去.
自定義布局-YJPCollectionLayout
YJPCollectionLayout.h
制定協(xié)議
@class YJPCollectionLayout;
@protocol YJPCollectionLayoutDelegate <NSObject>
@required
/**
決定cell的高度,必須實現(xiàn)方法
@param layout 布局類
@param index 第index個Cell
@param width cell 寬度
@return cell 高度
*/
- (CGFloat)collectionLayout: (YJPCollectionLayout *)layout heightForRowAtIndex:(NSInteger)index itemWidth:(CGFloat)width;
@optional
/**
確定有多少列
@param collectionLayout 布局類
@return 列數(shù)（默認3列）
*/
- (NSInteger)cloumnCountInCollectionLayout:(YJPCollectionLayout *)collectionLayout;
/**
決定cell 的列的距離
@param collectionLayout 布局類
@return 列的距離(默認10)
*/
- (CGFloat)columMarginInCollectionLayout:(YJPCollectionLayout *)collectionLayout;
/**
決定cell 的行的距離
@param collectionLayout 布局類
@return 行的距離（默認10）
*/
- (CGFloat)rowMarginInCollectionLayout:(YJPCollectionLayout *)collectionLayout;
/**
決定cell 的邊緣距
@param collectionLayout 布局類
@return 邊距
*/
- (UIEdgeInsets)edgeInsetInCollectionLayout:(YJPCollectionLayout *)collectionLayout;
@end
聲明協(xié)議,提供方法
@interface YJPCollectionLayout : UICollectionViewFlowLayout
@property (nonatomic,assign) id <YJPCollectionLayoutDelegate>delegate;
@end
YJPCollectionLayout.m
設置默認值
/** 列數(shù)*/
static const CGFloat columCount = 3;
/** 每一列間距*/
static const CGFloat columMargin = 10;
/** 每一列間距*/
static const CGFloat rowMargin = 10;
/** 邊緣間距*/
static const UIEdgeInsets defaultEdgeInsets = {10,10,10,10};
- (NSInteger)columCount{
if ([self.delegate respondsToSelector:@selector(cloumnCountInWaterFlowLayout:)]) {
return [self.delegate cloumnCountInWaterFlowLayout:self];
}
else{
return columCount;
}
}
- (CGFloat)columMargin{
if ([self.delegate respondsToSelector:@selector(columMarginInWaterFlowLayout:)]) {
return [self.delegate columMarginInWaterFlowLayout:self];
}
else{
return columMargin;
}
}
- (CGFloat)rowMargin{
if ([self.delegate respondsToSelector:@selector(rowMarginInWaterFlowLayout:)]) {
return [self.delegate rowMarginInWaterFlowLayout:self];
}
else{
return rowMargin;
}
}
- (UIEdgeInsets)defaultEdgeInsets{
if ([self.delegate respondsToSelector:@selector(edgeInsetInWaterFlowLayout:)]) {
return [self.delegate edgeInsetInWaterFlowLayout:self];
}
else{
return defaultEdgeInsets;
}
}
聲明集合
@interface YJPCollectionLayout ()
/** 布局屬性數(shù)組*/
@property (nonatomic,strong) NSMutableArray *attrsArray;
/** 存放所有列的當前高度*/
@property (nonatomic,strong) NSMutableArray *columnHeight;
@end
@implementation YJPCollectionLayout
- (NSMutableArray *)attrsArray
{
if (!_attrsArray) {
_attrsArray = [NSMutableArray array];
}
return _attrsArray;
}
- (NSMutableArray *)columnHeight
{
if (!_columnHeight) {
_columnHeight = [NSMutableArray array];
}
return _columnHeight;
}
重寫prepareLayout, layoutAttributesForItemAtIndexPath, layoutAttributesForElementsInRect, collectionViewContentSize 方法
/** 初始化*/
- (void)prepareLayout
{
[super prepareLayout];
//如果刷新布局就會重新調(diào)用prepareLayout這個方法,所以要先把高度數(shù)組清空
[self.columnHeight removeAllObjects];
for (int i = 0; i < self.columCount; i++) {
[self.columnHeight addObject:@(self.defaultEdgeInsets.top)];
}
NSInteger count = [self.collectionView numberOfItemsInSection:0];
[self.attrsArray removeAllObjects];
for (NSInteger i = 0; i < count; i++) {
NSIndexPath *indexPath = [NSIndexPath indexPathForRow:i inSection:0];
//獲取indexPath 對應cell 的布局屬性
UICollectionViewLayoutAttributes *attr = [self layoutAttributesForItemAtIndexPath:indexPath];
[self.attrsArray addObject:attr];
}
}
/**
* 返回indexPath 位置cell對應的布局屬性
*/
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewLayoutAttributes *attr = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
//使用for循環(huán),找出高度最短的那一列
//最短高度的列
NSInteger destColumn = 0;
CGFloat minColumnHeight = [self.columnHeight[0] doubleValue];
for (NSInteger i = 1; i < self.columCount; i++) {
CGFloat columnHeight =[self.columnHeight[i] doubleValue];
if (minColumnHeight > columnHeight) {
minColumnHeight = columnHeight;
destColumn = I;
}
}
CGFloat w = (self.collectionView.frame.size.width - self.defaultEdgeInsets.left - self.defaultEdgeInsets.right - (self.columCount - 1) * self.columMargin )/self.columCount;
//(使用代理在外部決定cell 的高度,下面會介紹)
CGFloat h = [self.delegate waterFlowLayout:self heightForRowAtIndex:indexPath.item itemWidth:w];
CGFloat x = self.defaultEdgeInsets.left + destColumn*(w + self.columMargin);
CGFloat y = minColumnHeight ;
if (y != self.defaultEdgeInsets.top) {
y += self.rowMargin;
}
attr.frame = CGRectMake(x,y,w,h);
self.columnHeight[destColumn] = @(y+ h);
return attr;
}
/**
* 決定cell 的排布
*/
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
return self.attrsArray;
}
/**
決定collectionView的可滾動范圍
*/
- (CGSize)collectionViewContentSize
{
CGFloat maxHeight = [self.columnHeight[0] doubleValue];
for (int i = 1; i < self.columCount; i++) {
CGFloat value = [self.columnHeight[i] doubleValue];
if (maxHeight < value) {
maxHeight = value;
}
}
return CGSizeMake(0, maxHeight+self.defaultEdgeInsets.bottom);
}
走到這一步，你的瀑布流布局以完成
使用
#pragma mark - YJPCollectionLayoutDelegate
- (CGFloat)collectionLayout:(YJPCollectionLayout *)layout heightForRowAtIndex:(NSInteger)index itemWidth:(CGFloat)width
{
return random()%100 + 80;
}
- (CGFloat)columMarginInCollectionLayout:(YJPCollectionLayout *)collectionLayout
{
return 10;
}
- (CGFloat)rowMarginInCollectionLayout:(YJPCollectionLayout *)collectionLayout
{
return 10;
}
- (NSInteger)cloumnCountInCollectionLayout:(YJPCollectionLayout *)collectionLayout
{
return 3;
}
- (void)configCollectionView
{
YJPCollectionLayout *layout = [[YJPCollectionLayout alloc]init];
layout.delegate = self;
UICollectionView *collectionView = [[UICollectionView alloc]initWithFrame:CGRectMake(0, NavigationHeight, K_Screen.width, K_Screen.height - NavigationHeight) collectionViewLayout:layout];
collectionView.delegate = self;
collectionView.dataSource = self;
collectionView.backgroundColor = [UIColor whiteColor];
[collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"UICollectionViewCell"];
[self.view addSubview:collectionView];
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return 50;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"UICollectionViewCell" forIndexPath:indexPath];
cell.backgroundColor = [UIColor randomColor];
return cell;
}
@end
