瀑布流-UICollectionView 的从新布局，动态加载HTML数据，HTML数据的解析和UICollectionViewFlowLayout的从布

               瀑布流是现在，APP开发的热点。它的出现，极大的让列表出现多种形态。不在是以前单纯的那个模式。今天，我们讲解怎么重新布局（也可以不用布局）,和加载动态的HTML的数据，和数据的刷新，进行创建瀑布流。其实，有两种方法创建，但是，第一种，有点问题，但也是可以的。下面我们就开始进入主题：

第一步：我们首先创建 UICollectionView对象

#pragma mark  创建 CollectionView

-(void)makeCollectionView{

    //实现瀑布流 ，我们要从新布局,那就要从新创建 UICollectionViewFlowLayout

    // 创建一个布局的对象

    ZSJ_PBL_CollectionViewFlowLayout * ZSJ_FlowLayout = [[ZSJ_PBL_CollectionViewFlowLayoutalloc]init];

    //实现其代理

    ZSJ_FlowLayout.delegate = self;

    //创建UICollectionView的对象

    _CollectView_zsj = [[UICollectionViewalloc]initWithFrame:CGRectMake(0,64,self.view.frame.size.width,self.view.frame.size.height-108)collectionViewLayout:ZSJ_FlowLayout];

    //  设置 UICollectionView  的一些属性

    //两个代理

    _CollectView_zsj.delegate =self;

    _CollectView_zsj.dataSource =self;

    //设置 UICollectionView的背景色

    _CollectView_zsj.backgroundColor = [UIColorcolorWithRed:220/255.0green:220/255.0blue:220/255.0alpha:1];

    // 注册 cell

    [_CollectView_zsjregisterClass:[ZSJ_CollectionViewCellclass]forCellWithReuseIdentifier:CCELL_ID];

    //将 UICollectionView添加到主视图控制器上

    [self.viewaddSubview:_CollectView_zsj];

    

}

第二步：我们要实现 UICollectionView的一些代理方法

#pragma mark  实现  UICollectionView的代理方法

/**************************************************************/

//这个方法是处理 UICollectionView 返回 cell的数量

-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{

    return_fashionModelArray.count;

}

/**************************************************************/

//这个是 UICollectionView 的 cell

-(UICollectionViewCell*)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{

    //创建 cell对象

    ZSJ_CollectionViewCell * Cell = [collectionViewdequeueReusableCellWithReuseIdentifier:CCELL_ID  forIndexPath:indexPath];

    //可以传递数据

    ZSJ_Modle * Model = _fashionModelArray[indexPath.row];

    [Cell sourc:Model];

    //实现收藏点击事件

    [Cell.collectbuttonaddTarget:selfaction:@selector(collectClick:)forControlEvents:UIControlEventTouchUpInside];

    //添加标记

    Cell.collectbutton.tag = indexPath.row;

    Cell.sharebutton.tag = indexPath.row;

    //实现分享点击事件

    [Cell.sharebuttonaddTarget:selfaction:@selector(shareClick:)forControlEvents:UIControlEventTouchUpInside];

    

    //返回你定义好的Cell

    return Cell;

    

}

/**************************************************************/

//这个是  UICollectionView cell被选中触发的方法

-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{

    

}

/**************************************************************/

//这个方法是  UICollectionView是否可选择，即是可否交互。

-(BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath{

    return YES;

}

第三步：我们要创建布局文件，并创建其对象，和其必要实现的方法

1、布局文件，声明的方法和属性

//

//  ZSJ_PBL_CollectionViewFlowLayout.h

//  瀑布流_ZSJMeth

//

//  Created by 周双建 on 15/12/9.

//  Copyright © 2015年周双建. All rights reserved.

//

#import <UIKit/UIKit.h>

//提前声明一个类

@class ZSJ_PBL_CollectionViewFlowLayout;

@protocol ZSJ_PBL_CollectionViewFlowLayoutDelegate <NSObject>

//声明一个获取Cell的高度的方法

-(CGFloat)getCollectionViewFlowLayout:(ZSJ_PBL_CollectionViewFlowLayout*)CollectionViewFlowLayout cellForItemWidth:(CGFloat) ItemWidth atIndexPath:(NSIndexPath*)IndexPath;

@end

@interface ZSJ_PBL_CollectionViewFlowLayout : UICollectionViewFlowLayout

//每一行的间距

@property(nonatomic,assign)CGFloat Linespacing;

//每一列的间距

@property(nonatomic,assign)CGFloat Arrangespacing;

//设置每一个Cell的偏移量

@property(nonatomic,assign)UIEdgeInsets SectionEdgeInsets;

//显示多少列

@property(nonatomic,assign)int     ArrangeCount;

//创建协议的对象

@property(nonatomic,weak)id <ZSJ_PBL_CollectionViewFlowLayoutDelegate> delegate;

@end

第四步：实现布局的方法，和其代理

//

//  ZSJ_PBL_CollectionViewFlowLayout.m

//  瀑布流_ZSJMeth

//

//  Created by 周双建 on 15/12/9.

//  Copyright © 2015年周双建. All rights reserved.

//

#import "ZSJ_PBL_CollectionViewFlowLayout.h"

@interface ZSJ_PBL_CollectionViewFlowLayout()

//创建一个字典，用来保存每一列（cell）的高度

@property(nonatomic,strong)NSMutableDictionary * MaxY_cell;

//创建一个数组，存放所有的布局属性

@property(nonatomic,strong)NSMutableArray * AttributeArray;

@end

@implementation ZSJ_PBL_CollectionViewFlowLayout

// 实现 init 方法

-(instancetype)init{

    if ([superinit]) {

        //设置行间距

        self.Linespacing =5.0;

        //设置列间距

        self.Arrangespacing =5.0;

        // 设置 创建多少列

        self.ArrangeCount =2;

        //设置每个cell的偏移量

        self.sectionInset =UIEdgeInsetsMake(5,5,5, 5);

    }

    return self;

}

//不允许改变布局

-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds{

    return NO;

}

// 每次布局前，要准备的东西

-(void)prepareLayout{

    [superprepareLayout];

    //获取每个cell的最大偏移量

    for (int i =0; i<self.ArrangeCount; i++) {

        NSString * Count_Str = [NSStringstringWithFormat:@"%d",i];

        [self.ManY_cellsetObject:@(self.sectionInset.top)forKey:Count_Str];

    }

    //移除创建自带对象的所有属性

    [self.AttributeArrayremoveAllObjects];

    //返回指定区(section)包含的数据源条目数(number of items)

    NSInteger Sectioncount = [self.collectionViewnumberOfItemsInSection:0];

    //方法获取某个indexPath下cell的LayoutAttributes信息

    for (int i =0; i< Sectioncount; i++) {

        UICollectionViewLayoutAttributes * LayoutAttributes = [selflayoutAttributesForItemAtIndexPath:[NSIndexPathindexPathForItem:iinSection:0]];

        [self.AttributeArrayaddObject:LayoutAttributes];

    }

}

#pragma mark  实现 UICollectionViewFlowLayout的代理方法 3个必须实现

//返回所有的Cell 尺寸

-(CGSize)collectionViewContentSize{

    //定义一个函数外可变的量

    __block NSString * maxColumn =@"0";

    [self.MaxY_cellenumerateKeysAndObjectsUsingBlock:^(NSString  * Column,NSNumber  * MaxY, BOOL * _Nonnull stop) {

        if ([MaxY floatValue]>[self.MaxY_cell[maxColumn]floatValue]) {

            maxColumn = Column;

        }

    }];

    return CGSizeMake(0, [self.MaxY_cell[maxColumn]floatValue]+self.sectionInset.bottom);

    

}

// 获取指定 NSIndexPath下 Cell的 LayoutAttributes信息

-(UICollectionViewLayoutAttributes*)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{

    //首先我们假设第一个为最短的cell

    __block NSString * minColumn =@"0";

    // 找出最短的那一列

    [self.MaxY_cellenumerateKeysAndObjectsUsingBlock:^(NSString *column,NSNumber *maxY,BOOL *stop) {

        if ([maxY floatValue] < [self.MaxY_cell[minColumn]floatValue]) {

            minColumn = column;

        }

    }];

    //获取 Cell的宽和高

    CGFloat width = ([UIScreenmainScreen].bounds.size.width-self.sectionInset.left-self.sectionInset.right- (self.ArrangeCount-1)*self.Arrangespacing)/self.ArrangeCount;

    //通过协议方法来获取高度

    CGFloat height = [self.delegategetCollectionViewFlowLayout:selfcellForItemWidth:widthatIndexPath:indexPath];

    //计算 Cell的起始坐标

    CGPoint Point;

    Point.x = self.sectionInset.left + (width +self.Arrangespacing) * [minColumnintValue];

    //高度的偏移坐标 Y

    Point.y = [self.MaxY_cell[minColumn]floatValue] +self.Linespacing;

    //更换这一列的最大值

    self.MaxY_cell[minColumn] =@(height+Point.y);

    // 创建属性

    UICollectionViewLayoutAttributes *attrs_ZSJ = [UICollectionViewLayoutAttributeslayoutAttributesForCellWithIndexPath:indexPath];

    attrs_ZSJ.frame = CGRectMake(Point.x, Point.y, width, height);

    

    return attrs_ZSJ;

}

/**

 *  返回rect范围内的布局属性

 */

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect

{

    

    returnself.AttributeArray;

}

//字典和数组的懒加载

-(NSMutableDictionary*)ManY_cell{

    if (!_MaxY_cell) {

        _MaxY_cell = [[NSMutableDictionaryalloc]init];

    }

    return_MaxY_cell;

}

-(NSMutableArray*)AttributeArray{

    if (!_AttributeArray) {

        _AttributeArray = [[NSMutableArrayalloc]init];

    }

    return_AttributeArray;

}

@end

第五步：创建 Cell对象

1、声明一些 Cell 的属性参数

//

//  ZSJ_CollectionViewCell.h

//  瀑布流_ZSJMeth

//

//  Created by 周双建 on 15/12/9.

//  Copyright © 2015年周双建. All rights reserved.

//

#import <UIKit/UIKit.h>

#import "ZSJ_Modle.h"

@interface ZSJ_CollectionViewCell : UICollectionViewCell

//时尚图片

@property(nonatomic,strong)UIImageView * fashionImageView;

//时尚标题

@property(nonatomic,strong)UILabel * fashionTitle;

//时尚内容

@property(nonatomic,strong)UILabel * fashionContent;

//作品发送时间

@property(nonatomic,strong)UILabel * fashionTime;

// 收藏 按钮

@property(nonatomic,strong)UIButton * collectbutton;

// 分享 按钮

@property(nonatomic,strong)UIButton * sharebutton;

//传递数据

-(void)sourc:(ZSJ_Modle*)Model;

@end

2、实现Cell的布局和方法

//

//  ZSJ_CollectionViewCell.m

//  瀑布流_ZSJMeth

//

//  Created by 周双建 on 15/12/9.

//  Copyright © 2015年周双建. All rights reserved.

//

#import "ZSJ_CollectionViewCell.h"

#import "UIImageView+WebCache.h"

#define Company_picture_Url  @"http://img.koolpei.com:803/"

@implementation ZSJ_CollectionViewCell

-(instancetype)initWithFrame:(CGRect)frame{

    if ([superinitWithFrame:frame]) {

        //创建布局

        self.backgroundColor = [UIColorwhiteColor];

        [self makeUI];

    }

    return self;

}

#pragma mark 创建布局

-(void)makeUI{

    //添加图片

    self.fashionImageView = [[UIImageViewalloc]init];

    [self.contentViewaddSubview:self.fashionImageView];

    //添加标题

    self.fashionTitle = [[UILabelalloc]init];

    [self.contentViewaddSubview:self.fashionTitle];

    //添加内容

    self.fashionContent = [[UILabelalloc]init];

    [self.contentViewaddSubview:self.fashionContent];

    //添加时间

    self.fashionTime = [[UILabelalloc]init];

    [self.contentViewaddSubview:self.fashionTime];

    //添加收藏按钮

    self.collectbutton = [UIButtonbuttonWithType:UIButtonTypeCustom];

    [self.contentViewaddSubview:self.collectbutton];

    //分享按钮

    self.sharebutton = [UIButtonbuttonWithType:UIButtonTypeCustom];

    [self.contentViewaddSubview:self.sharebutton];

    

}

//模型数据的加载

-(void)sourc:(ZSJ_Modle *)Model{

    // 商品的标题的加入和显示

    NSString * Title_Str = Model._articletitle;

    CGFloat Title_H = [Title_StrboundingRectWithSize:CGSizeMake(self.frame.size.width,0)options:NSStringDrawingUsesLineFragmentOriginattributes:@{NSFontAttributeName:[UIFontsystemFontOfSize:20]}context:nil].size.height;

   

    // 商品的内容

    //HtMl 字符串的加载

    NSAttributedString * attrStr = [[NSAttributedStringalloc]initWithData:[Model._articletextdataUsingEncoding:NSUnicodeStringEncoding]options:@{NSDocumentTypeDocumentAttribute:NSHTMLTextDocumentType}documentAttributes:nilerror:nil];

    self.fashionContent.attributedText=attrStr;

    //计算内容的高度

    CGFloat Content_H = [self.fashionContent.textboundingRectWithSize:CGSizeMake(self.frame.size.width,100)options:NSStringDrawingUsesLineFragmentOriginattributes:@{NSFontAttributeName:[UIFontsystemFontOfSize:20]}context:nil].size.height;

    //商品图片的加入

    self.fashionImageView.frame =CGRectMake(0,0,self.frame.size.width,self.frame.size.height-Title_H-Content_H-50);

    [self.fashionImageViewsd_setImageWithURL:[NSURLURLWithString:[NSStringstringWithFormat:@"%@%@",Company_picture_Url,Model._articleimg]]];

    /**************************************/

    self.fashionTitle.frame =CGRectMake(10,CGRectGetMaxY(self.fashionImageView.frame)+5,self.frame.size.width-20, Title_H);

    self.fashionTitle.textColor = [UIColorblackColor];

    self.fashionTitle.text = Title_Str;

    self.fashionTitle.numberOfLines =0;

    [self.fashionTitlesizeThatFits:CGSizeMake(self.frame.size.width-20, Title_H)];

    /******************************/

    self.fashionContent.frame =CGRectMake(10,CGRectGetMaxY(self.fashionTitle.frame)+5,self.frame.size.width-20, Content_H);

    self.fashionContent.numberOfLines =0;

    [self.fashionContentsizeThatFits:CGSizeMake(self.frame.size.width-20, Content_H)];

    self.fashionContent.textColor = [UIColorlightGrayColor];

    

    // 文章发布时间

    self.fashionTime.frame =CGRectMake(2,self.frame.size.height-40,80,30);

    [self.fashionTimesetFont:[UIFontsystemFontOfSize:12]];

    self.fashionTime.text = Model._time;

    

    //收藏按钮

    self.collectbutton.frame =CGRectMake(self.frame.size.width-70,self.frame.size.height-35,30,30);

    [self.collectbuttonsetImage:[UIImageimageNamed:@"ic_love"]forState:UIControlStateNormal];

    //分享

    self.sharebutton.frame =CGRectMake(self.frame.size.width-40,self.frame.size.height-35,30,30);

    [self.sharebuttonsetImage:[UIImageimageNamed:@"ic_share_nor"]forState:UIControlStateNormal];

    

}

@end

第六步：创建数据模型

//

//  ZSJ_Modle.h

//  瀑布流_ZSJMeth

//

//  Created by 周双建 on 15/12/9.

//  Copyright © 2015年周双建. All rights reserved.

//

#import <Foundation/Foundation.h>

@interface ZSJ_Modle : NSObject

@property(nonatomic,copy)NSString * __type;

@property(nonatomic,copy)NSString * _articlecontext;

@property(nonatomic,assign)NSInteger _articleid;

@property(nonatomic,copy)NSString * _articleimg;

@property(nonatomic,copy)NSString * _articletext;

@property(nonatomic,copy)NSString * _articletitle;

@property(nonatomic,copy)NSString * _articletype;

@property(nonatomic,assign)NSInteger _brandid;

@property(nonatomic,assign)NSInteger _connecttype;

@property(nonatomic,copy)NSString * _createtime;

@property(nonatomic,assign)NSInteger _height;

@property(nonatomic,assign)NSInteger _width;

@property(nonatomic,copy)NSString * _time;

@property(nonatomic,assign)NSInteger _xihuan;

-(void)ConfigZSJ:(NSDictionary*)dict;

@end

以上是实现的全部过程和详细介绍：

实现的效果为：

7、完整项目下载地址：

http://download.csdn.net/detail/zhoushuangjian511/9342129