用CHTCollectionViewWaterfallLayout写瀑布流

用CHTCollectionViewWaterfallLayout写瀑布流

实现的瀑布流效果图:

源码:

WaterfallCell.h 与 WaterfallCell.m

//
//  WaterfallCell.h
//  UICollectionView
//
//  Created by YouXianMing on 14-9-17.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface WaterfallCell : UICollectionViewCell

@property (nonatomic, strong) UIImageView *showImageView;

@end
//
//  WaterfallCell.m
//  UICollectionView
//
//  Created by YouXianMing on 14-9-17.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import "WaterfallCell.h"

@implementation WaterfallCell

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Scale the imageview to fit inside the contentView with the image centered:
        CGRect imageViewFrame = CGRectMake(0.f, 0.f,
                                           CGRectGetMaxX(self.contentView.bounds),
                                           CGRectGetMaxY(self.contentView.bounds));
        _showImageView                  = [UIImageView new];
        _showImageView.contentMode      = UIViewContentModeScaleAspectFill;
        _showImageView.frame            = imageViewFrame;
        _showImageView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
        _showImageView.clipsToBounds    = YES;
        [self addSubview:_showImageView];
        self.layer.borderWidth = 1.f;
    }
    return self;
}

@end

HeaderView.h 与 HeaderView.m

//
//  HeaderView.h
//  UICollectionView
//
//  Created by YouXianMing on 14-9-17.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface HeaderView : UICollectionReusableView

@end
//
//  HeaderView.m
//  UICollectionView
//
//  Created by YouXianMing on 14-9-17.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import "HeaderView.h"

@implementation HeaderView

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.layer.borderWidth = 1.f;
    }
    return self;
}

@end

FooterView.h 与 FooterView.m

//
//  FooterView.h
//  UICollectionView
//
//  Created by YouXianMing on 14-9-17.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface FooterView : UICollectionReusableView

@end
//
//  FooterView.m
//  UICollectionView
//
//  Created by YouXianMing on 14-9-17.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import "FooterView.h"

@implementation FooterView

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.layer.borderWidth = 1.f;
    }
    return self;
}

@end

使用时候的代码:

//
//  RootViewController.m
//  UICollectionView
//
//  Created by YouXianMing on 14-9-17.
//  Copyright (c) 2014年 YouXianMing. All rights reserved.
//

#import "RootViewController.h"
#import "CHTCollectionViewWaterfallLayout.h"

#import "WaterfallCell.h"
#import "HeaderView.h"
#import "FooterView.h"

#define CELL_IDENTIFIER   @"WaterfallCell"
#define HEADER_IDENTIFIER @"WaterfallHeader"
#define FOOTER_IDENTIFIER @"WaterfallFooter"

@interface RootViewController ()<UICollectionViewDataSource, CHTCollectionViewDelegateWaterfallLayout>

@property (nonatomic, strong) UICollectionView *collectionView;
@property (nonatomic, strong) NSMutableArray   *dataSource;
@property (nonatomic, strong) NSMutableArray   *dataSourceSize;

@end

@implementation RootViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    // 数据源
    _dataSource = [NSMutableArray new];
    for (int i = 0; i <= 16; i++)
    {
        [_dataSource addObject:[UIImage imageNamed:[NSString stringWithFormat:@"%d", i]]];
    }

    // 初始化布局
    CHTCollectionViewWaterfallLayout *layout = [[CHTCollectionViewWaterfallLayout alloc] init];

    // 设置布局
    layout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
    layout.headerHeight = 100;           // headerView高度
    layout.footerHeight = 100;           // footerView高度
    layout.columnCount  = 4;             // 几列显示
    layout.minimumColumnSpacing    = 5;  // cell之间的水平间距
    layout.minimumInteritemSpacing = 5;  // cell之间的垂直间距

    // 初始化collectionView
    _collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds
                                         collectionViewLayout:layout];
    _collectionView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
    _collectionView.dataSource       = self;
    _collectionView.delegate         = self;
    _collectionView.backgroundColor  = [UIColor whiteColor];

    // 注册cell以及HeaderView,FooterView
    [_collectionView registerClass:[WaterfallCell class]
        forCellWithReuseIdentifier:CELL_IDENTIFIER];
    [_collectionView registerClass:[HeaderView class]
        forSupplementaryViewOfKind:CHTCollectionElementKindSectionHeader
               withReuseIdentifier:HEADER_IDENTIFIER];
    [_collectionView registerClass:[FooterView class]
        forSupplementaryViewOfKind:CHTCollectionElementKindSectionFooter
               withReuseIdentifier:FOOTER_IDENTIFIER];

    // 添加到视图当中
    [self.view addSubview:_collectionView];
}

#pragma mark - UICollectionViewDelegate
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    NSLog(@"您点击了 %@", _dataSource[indexPath.row]);
}

#pragma mark - UICollectionViewDataSource

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    // 数据源
    return [_dataSource count];
}

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    // 1个区
    return 1;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView
                  cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    // 注册collectionViewCell
    WaterfallCell *cell = \
        (WaterfallCell *)[collectionView dequeueReusableCellWithReuseIdentifier:CELL_IDENTIFIER
                                                                   forIndexPath:indexPath];

    UIImage *image           = _dataSource[indexPath.row];
    cell.showImageView.image = image;

    return cell;
}

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView
           viewForSupplementaryElementOfKind:(NSString *)kind
                                 atIndexPath:(NSIndexPath *)indexPath
{
    UICollectionReusableView *reusableView = nil;

    if ([kind isEqualToString:CHTCollectionElementKindSectionHeader])
    {
        reusableView = [collectionView dequeueReusableSupplementaryViewOfKind:kind
                                                          withReuseIdentifier:HEADER_IDENTIFIER
                                                                 forIndexPath:indexPath];
    } else if ([kind isEqualToString:CHTCollectionElementKindSectionFooter])
    {
        reusableView = [collectionView dequeueReusableSupplementaryViewOfKind:kind
                                                          withReuseIdentifier:FOOTER_IDENTIFIER
                                                                 forIndexPath:indexPath];
    }

    return reusableView;
}

#pragma mark - CHTCollectionViewDelegateWaterfallLayout
- (CGSize)collectionView:(UICollectionView *)collectionView
                  layout:(UICollectionViewLayout *)collectionViewLayout
  sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    // 用以返回尺寸
    UIImage *image = _dataSource[indexPath.row];
    return image.size;
}

@end

这个代码再怎么简单也会很复杂-_-!!

以下是使用的细节需要注意的地方:

设置的对应关系-

cell中的图片可不是随便设置的-

要注意返回每个cell的size值-

 

时间: 2024-12-22 22:09:31

用CHTCollectionViewWaterfallLayout写瀑布流的相关文章

深入探秘jquery瀑布流的实现_jquery

瀑布流也应该算是流行几年了吧.首先是由Pinterest掀起的浪潮,然后国内设计如雨后春笋般,冒出很多瀑布流的例子,比如,蘑菇街,Mark之(不过最近涉黄,好像被喝茶了),还有淘宝的 "哇哦". 这些都是很棒的例子, 今天我想重新谈起瀑布流,一是想满足我自己的愿望,写一个详细的介绍(不敢自名为教程),二是,给大家一份参考,因为search很多,但是他们给的是一个插件,然后教你怎样配置,当然,也有很多其他的大神也细心的做了很多教程,比如 imooc上面 Amy 姐姐 发布的瀑布流教程,也

一个简单的瀑布流效果(主体形式自写)_jquery

闲着没事,自己写了个瀑布流,我个人写脚本或者是网页的习惯是:只参考别人的效果,很少参考别人的代码,有时侯我宁愿用审查元素来推断代码,也不愿去看源代码.我不知道这个习惯好不好.虽然中间过程是花了我不少时间,但是我做的东西的每一个细节我都还能记清楚(当然肯定后来会忘),因为是我实现的.下面说正题: 瀑布流的主体即为几个ul标签,新增加的元素以 li的形式按照当前 ul的高度有选择性的插入到某个ul下. 主体形式如下: 复制代码 代码如下: <div id="main"> <

利用JS实现简单的瀑布流效果

哈哈, 我又来啦, 在这一段时间里, 我简单的学习了一下javascript(JS), 虽然不是很懂啦, 但是我也简单的尝试着做了点小东西, 就比如现在流行的瀑布流效果, 经过我的努力终于成功的完成了, 虽然中间非常的坎坷, 并不是一帆风顺但是最终我还是实现了个简单的效果, 下面就为大家简单的介绍下, 不知道的友友们, 有兴趣的话, 可以来参考下, 欢迎指出缺点和不足! 一.瀑布流之准备工作    首先声明下, 为了方便演示和联系, 我使用的是本地图片, 如果大家有需要的话可以尝试着写下网络的,

Pinterest采用瀑布流的方式网页设计

文章描述:浅谈个人在瀑布流网页的实现中遇到的问题和解决方法. 先上Demo 瀑布流排序 : http://cued.xunlei.com/demos/publ/demo1.html 瀑布流+无限拖 http://cued.xunlei.com/demos/publ/demo2.html 随着pinterest的走红,瀑布流式的布局被越来越多的网站所使用,这种布局确实有很多好处,图片列表页有很强大的视觉感染力,而且还提高了用户"发现好图"的效率.瀑布流的实现有很多种方式,之前淘宝UED有

瀑布流的小例子和ThinkPHP相结合

瀑布流的插件jquery.masonry.min.js 地址:http://masonry.desandro.com/index.html里面有很 多,但是都是英文的,因为项目需要,就自己写了一个简单的例子 其实瀑布流就是用了固定的宽度或者高度产生一堆不规则的div来展现出来的. 流程是 1:初始化页面的时候加载一次数据 2.当页面到底部的时候再次加载数据 3,重 复以上操作直到没有数据 <!DOCTYPE HTML> <html> <head> <meta ht

Android瀑布流照片墙实现,体验不规则排列的美感

传统界面的布局方式总是行列分明.坐落有序的,这种布局已是司空见惯,在不知不觉中大家都已经对它 产生了审美疲劳.这个时候瀑布流布局的出现,就给人带来了耳目一新的感觉,这种布局虽然看上去貌似毫 无规律,但是却有一种说不上来的美感,以至于涌现出了大批的网站和应用纷纷使用这种新颖的布局来设计 界面. 记得我在之前已经写过一篇关于如何在Android上实现照片墙功能的文章了,但那个时候是使 用的GridView来进行布局的,这种布局方式只适用于"墙"上的每张图片大小都相同的情况,如果图片的大 小

浅谈瀑布流网页实现中遇到的问题和解决方法

  先上Demo 瀑布流排序 : http://cued.xunlei.com/demos/publ/demo1.html 瀑布流+无限拖 http://cued.xunlei.com/demos/publ/demo2.html 随着pinterest的走红,瀑布流式的布局被越来越多的网站所使用,这种布局确实有很多好处,图片列表页有很强大的视觉感染力,而且还提高了用 户"发现好图"的效率.瀑布流的实现有很多种方式,之前淘宝UED有篇文章详细的介绍过各种方式的优劣.今天我们主要讨论一下绝

jquery代码实现简单的随机图片瀑布流效果

  jquery代码实现简单的随机图片瀑布流效果 瀑布流布局最近真的很流行,很多人都跟我一样想知道是怎么做出来的吧,经过网上搜索大量的参考结合N边的实验今天终于被我写出来了,这里分享给大家,有需要的小伙伴参考下吧. 为了便于大家理解我使用了jQuery.当然用源生js代码执行的效率会高一些,但是很多人多源生js不是很熟练 代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 3

iOS开发之窥探UICollectionViewController(三) --使用UICollectionView自定义瀑布流

上篇博客的实例是自带的UICollectionViewDelegateFlowLayout布局基础上来做的Demo, 详情请看<iOS开发之窥探UICollectionViewController(二) --详解CollectionView各种回调>.UICollectionView之所以强大,是因为其具有自定义功能,这一自定义就不得了啦,自由度非常大,定制的高,所以功能也是灰常强大的.本篇博客就不使用自带的流式布局了,我们要自定义一个瀑布流.自定义的瀑布流可以配置其参数: 每个Cell的边距