最近學習了瀑布流布局，是用collectionview實現的。首先說說設計思路，用collectionview做出來的瀑布流是固定行數或者列數的。以現在主流固定列數為例，每個item就是固定寬，不固定高，同時每個item之間的間距是固定的，那麼每行的y值計算就需要通過前一行的最短的item來確定。
既然是用collectionview實現，而collectionview的布局是通過他的layout來實現，那麼就需要重寫uicollectionviewlayout中的 -(
void
)preparelayout，
-(nsarray*)layoutattributesforelementsinrect:(cgrect)rect，
-(uicollectionviewlayoutattributes *)layoutattributesforitematindexpath:(nsindexpath *)indexpath，
-(cgsize)collectionviewcontentsize。
具體實現如下：
#import @class customwaterflowlayout;
@protocol customwaterflowlayoutdelegate @required
//必須實現的**方法，返回每個item的高度
-(cgfloat)customwaterflow:(customwaterflowlayout *)layout heightforitematindexpath:(nsinteger)index itemwidth:(cgfloat)itemwidth;
@optional
-(nsinteger)colcountincustomwaterflow:(customwaterflowlayout *)layout;
-(cgfloat)colmarginincustomwaterflow:(customwaterflowlayout *)layout;
-(cgfloat)rowmarginincustomwaterflow:(customwaterflowlayout *)layout;
-(uiedgeinsets)edgeinsetsincustomwaterflow:(customwaterflowlayout *)layout;
@end
@inte***ce customwaterflowlayout : uicollectionviewlayout
@property (nonatomic, weak) iddelegate;
@end
#import "customwaterflowlayout.h"
//預設列數
static const nsinteger customdefaultcolumncount = 3;
//每一列之間的間距
static const cgfloat customdefaultcolmargin = 10.0;
//每一行之間的間距
static const cgfloat customdefaultrowmargin = 10.0;
//邊緣間距
static const uiedgeinsets customdefaultedgeinsets = ;
@inte***ce customwaterflowlayout ()
//存放所有cell的布局屬性
@property (nonatomic, strong) nsmutablearray * attributesaarray;
//存放所有列的當前高度
@property (nonatomic, strong) nsmutablearray * colheightarray;
//內容的高度
@property (nonatomic, assign) cgfloat contentheight;
-(cgfloat)colmargin;
-(cgfloat)rowmargin;
-(nsinteger)colcount;
-(uiedgeinsets)edgeinsets;
@end
@implementation customwaterflowlayout
#pragma mark **方法資料處理/常見資料處理
//這樣寫可以在**方法中設定需要的布局資料，也可以有預設資料，是模仿tableview的**實現
-(uiedgeinsets)edgeinsetselse
}-(nsinteger)colcountelse
}-(cgfloat)colmarginelse
}-(cgfloat)rowmarginelse
}//懶載入
-(nsmutablearray *)colheightarray
return _colheightarray;
}-(nsmutablearray *)attributesaarray
return _attributesaarray;
}//初始化
-(void)preparelayout
//清空之前所有的布局屬性
[self.attributesaarray removeallobjects];
//開始建立每乙個cell對應的布局屬性
nsinteger count = [self.collectionview numberofitemsinsection:0];
for (nsinteger i = 0; i < count; i++)
}//決定cell的排布
-(nsarray*)layoutattributesforelementsinrect:(cgrect)rect
//返回indexpath位置cell對應的布局屬性
-(uicollectionviewlayoutattributes *)layoutattributesforitematindexpath:(nsindexpath *)indexpath
}cgfloat x = self.edgeinsets.left + destcol * (self.colmargin + w);
cgfloat y = mincolheight;
if (y != self.edgeinsets.top)
attrs.frame = cgrectmake(x,y,w,h);
//更新最短那列的高度
self.colheightarray[destcol] = @(cgrectgetmaxy(attrs.frame));
cgfloat colheight = [self.colheightarray[destcol] doublevalue];
if (self.contentheight < colheight)
return attrs;
}-(cgsize)collectionviewcontentsize
@end
iOS 瀑布流封裝
功能描述 wslwaterflowlayout 是在繼承於uicollectionviewlayout的基礎上封裝的帶頭腳檢視的瀑布流控制項。目前支援豎向瀑布流 item等寬不等高 支援頭腳檢視 水平瀑布流 item等高不等寬 不支援頭腳檢視 豎向瀑布流 item等高不等寬 支援頭腳檢視 三種樣式的...
iOS 瀑布流封裝
位址如下 功能描述 wslwaterflowlayout 是在繼承於uicollectionviewlayout的基礎上封裝的帶頭腳檢視的瀑布流控制項。目前支援豎向瀑布流 item等寬不等高 支援頭腳檢視 水平瀑布流 item等高不等寬 不支援頭腳檢視 豎向瀑布流 item等高不等寬 支援頭腳檢視 ...
js瀑布流，簡單封裝
乙個很簡單的瀑布流載入，當滾動條滾動到底部時自動載入，先 敬上 lang en charset utf 8 demotitle head li pinterest wrap pinterest wrap ul pinterest wrap ulli style class pinterest wra...