自定義瀑布流

// 在.h裡@class, 在.m裡#import

@class
dkflowlayout;
@protocol
dkflowlayoutdelegate
- (cgfloat) layout: (dkflowlayout *)layout heightforitematindexpath:(nsindexpath *) indexpath width: (cgfloat) width;
@end
@inte***ce
dkflowlayout : uicollectionviewlayout
// 指定有多少列(一般2到4列)
@property (nonatomic, assign) nsinteger columncounts;
// 設定距離螢幕四周的邊界距離
@property (nonatomic, assign) uiedgeinsets edgeinsets;
// 列間距
@property (nonatomic, assign) nsinteger columnspace;
// 行間距
@property (nonatomic, assign) nsinteger rowspace;
@property (nonatomic, assign) id
delegate;
@end

#define kwidth self.collectionview.frame.size.width

@inte***ce
dkflowlayout ()
// 用來儲存每一列的 y 值
@property (nonatomic, retain) nsmutabledictionary *columndic;
// 用來存放 item 的 attribute 物件
@property (nonatomic, retain) nsmutablearray *attributsarray;
@end
@implementation
dkflowlayout
// 1.初始化方法
- (instancetype) init 
return
self;
}// 2.preparelayout方法: collectionview 布局 item 的時候,該方法會被執行
- (void) preparelayout 
// 獲取 collectionview 上 item 的個數
nsinteger count = [self
.collectionview numberofitemsinsection:0];
// 迴圈遍歷每個 item
for (int i = 0; i < count; i++) 
}// 3.自定義乙個方法設定每個 item 的資訊
- (void) setitemframe: (nsinteger) index 
}];// 寬 = (螢幕寬 - 左邊界 - 右邊界 - 列間距 * (列數 - 1)) / 列數
cgfloat width = (kwidth - self
.edgeinsets
.left - self
.edgeinsets
.right - self
.columnspace * (self
.columncounts - 1)) / self
.columncounts;
// x = 左邊距 + (寬 + 列間距) * 列的下標(對應當前最短那列的下標)
cgfloat x = self
.edgeinsets
.left + (width + self
.columnspace) * [mincolumn floatvalue];
// 建立乙個 indexpath
nsindexpath *indexpath = [nsindexpath indexpathforitem:index insection:0];
// 高
cgfloat height = [self
.delegate layout:self heightforitematindexpath:indexpath width:width];
// y
// 先找到當前最短那列的 y 值
cgfloat miny = [self
.columndic[mincolumn] floatvalue];
// 為最短的列更新 y 軸的高度 = miny + 高 + 行間距
self
.columndic[mincolumn] = @(miny + height + self
.rowspace);
// uicollectionviewlayoutattributes: 設定 item 的 frame, bounds, 透明度等屬性
uicollectionviewlayoutattributes *attribute = [uicollectionviewlayoutattributes layoutattributesforcellwithindexpath:indexpath];
attribute.frame = cgrectmake(x, miny, width, height);
[self
.attributsarray addobject:attribute];
}// 4.把所有樣式返回,告訴系統如何去布局
- (nullable nsarray
<__kindof uicollectionviewlayoutattributes *> *)layoutattributesforelementsinrect:(cgrect)rect 
// 5.設定滾動的範圍
- (cgsize) collectionviewcontentsize 
}];cgfloat h = [self
.columndic[maxy] floatvalue] + self
.edgeinsets
.bottom;
return cgsizemake(0, h);
}@end

@inte***ce

mycell : uicollectionviewcell
@property (nonatomic, retain) uiimageview *picimageview;
@property (nonatomic, retain) picture *pic;
@end

@implementation

mycell
- (instancetype) initwithframe:(cgrect)frame 
return
self;
}- (void) layoutsubviews 
// 重寫 cell 的 set 方法
- (void) setpic:(picture *)pic 
[self
.picimageview sd_setimagewithurl:[nsurl urlwithstring:_pic.thumburl]];
}@end

@inte***ce

picture : nsobject
@property (nonatomic, copy) nsstring *thumburl;
@property (nonatomic, copy) nsnumber *width;
@property (nonatomic, copy) nsnumber *height;
@end

- (void) createdata 

}- (void) createview 
- (nsinteger) collectionview:(uicollectionview *)collectionview numberofitemsinsection:(nsinteger)section 
- (uicollectionviewcell *)collectionview:(uicollectionview *)collectionview cellforitematindexpath:(nsindexpath *)indexpath 
- (cgfloat) layout:(dkflowlayout *)layout heightforitematindexpath:(nsindexpath *)indexpath width:(cgfloat)width 
// data.json
[  ,
......

05 自定義瀑布流

自定義了乙個uicollectionviewflowlayout的子類,在使用的時候需要建立自定義flow layout的物件,實現協議方法來實現瀑布流效果 一 原理 首先,獲得的尺寸,一般在資料中都會給出的尺寸 計算itemwidth,假設瀑布流為兩行,itemwidth screenwidth ...

瀑布流布局與自定義瀑布流布局外掛程式

瀑布流布局是網頁中經常採用的一種布局方式，其布局有如下特點 瀑布流布局特點 1 元素按列排放 2 列寬一致，但高度不等 3 布局過程中將優先向高度最小的列補充資料 以下是自定義的乙個jquery瀑布流外掛程式 jquery.mywaterfull.js function arrheight.push...

自定義 如何自定義協議

何為自定義協議，其實是相對標準協議來說的，這裡主要針對的是應用層協議 常見的標準的應用層協議如http ftp smtp等，如果我們在網路通訊的過程中不去使用這些標準協議，那就需要自定義協議，比如我們常用的rpc框架 dubbo，thrift 分布式快取 redis，memcached 等都是自定義...