瀑布流簡單實現

使用scrollview簡單實現瀑布流

**實現

waterflowview.h--------------------------------------

#import

typedefenumwaterfiowviewmargintype;

@class

waterflowviewcell,waterfiowview;

//資料來源方法

@protocol waterflowviewdatasource

//必須實現的方法

@required

//一共有多少個資料

- (nsuinteger)numberofcellsinwaterflowview:(waterfiowview *)waterflowview;

//返回index位置對應的cell

- (waterflowviewcell *)waterflowview:(waterfiowview *)waterflowview cellatindex:(nsuinteger)index;

@optional

//一共有多少列

- (nsuinteger)numberofcolumnsinwaterflowview:(waterfiowview *)waterflowview;

@end

//**方法

@protocol waterflowviewdelegate

@optional

//第index位置cell對應的高度

- (cgfloat)waterflowview:(waterfiowview *)waterfiowview heightatindex:(nsuinteger)index;

//選中第index位置的cell

- (void)waterfiowview:(waterfiowview *)waterfiowview didselectatindex:(nsuinteger)index;

//返回間距

- (cgfloat)waterfiowview:(waterfiowview *)waterfiowview marginfortype:(waterfiowviewmargintype)type;

@end

@inte***ce waterfiowview :uiscrollview

@property(nonatomic,weak)id<

waterflowviewdatasource

>datasource;

@property(nonatomic,weak)id<

waterflowviewdelegate

>delegate;

- (cgfloat)cellwidth;

- (void)reloaddata;

- (id)dequeuereusablecellwithidentifier:(nsstring *)indentifier;

@end

-----------------------------------

waterflowview.m---------------------------------------------

#import "waterfiowview.h"

#import "waterflowviewcell.h"

#define waterflowviewdefaultnumberofclunms 3

#define waterfiowviewdefaultcellh 100

#define waterfiowviewdefaultmargin 10

@inte***ce

waterfiowview()

@property(nonatomic,strong)

nsmutablearray

*cellframes;

@property(nonatomic,strong)

nsmutabledictionary

*displayingcells;

@property(nonatomic,strong)

nsmutableset

*reusablecells;

@end

-------------------------------------------

//1，計算每個cell的frame

- (void)reloaddata

//計算每個cell的frame

for (int i =0; i < numberofcells ; i++)

}//3cell的位置

//cell的x＝左邊的間距＋列號＊（cell的寬度＋每列之間的間距）

cgfloat cellx = leftm + cellatcolumn * (cellw +columnm);

//cell的y，先設定為0

cgfloat celly = 0;

if (maxyofcellatcolumn == 0.0) else

//設定cell的frame並新增到陣列中去

cgrect cellframe = cgrectmake(cellx, celly, cellw, cellh);

[self.cellframes

addobject:[nsvalue

valuewithcgrect:cellframe]];

//更新最短那一列的最大的y值

maxyofcolumns[cellatcolumn] =cgrectgetmaxy(cellframe);

//        waterflowviewcell *cell = [self.datasource waterflowview:self cellatindex:i];

//        cell.frame = cellframe;

//        [self addsubview:cell];

}//設定contentsize

cgfloat contenth = maxyofcolumns[0];

for (int i =0; i if (maxyofcolumns[i] > contenth)

}contenth +=bottomm;

self.contentsize =cgsizemake(0, contenth);

} --------

- (void)layoutsubviews

}else}}

nslog

(@"-----%ld"

,self

.subviews.count); }

-------------

- (id)dequeuereusablecellwithidentifier:(nsstring *)indentifier

}];if (reusablecell)

return reusablecell;

}------------

判斷對應的cell在不再螢幕上；

- (bool)isinscreen:(cgrect)frame

-------------------

- (cgfloat)marginfortype:(waterfiowviewmargintype)typeelse

}- (nsuinteger)numberofcolumnselse

}- (cgfloat)heightatindex:(nsuinteger)indexelse

}------------------------------------------

viewcontroller.m

實現waterflowview的datasource和delegate方法

- (waterflowviewcell *)waterflowview:(waterfiowview *)waterflowview cellatindex:(nsuinteger)index

uilabel *label = (uilabel *)[cellviewwithtag:120];

label.text = [nsstring

stringwithformat:@"%ld",index];

// nslog(@"%ld--%p",index,cell);

return cell;

}- (cgfloat)waterflowview:(waterfiowview *)waterfiowview heightatindex:(nsuinteger)index

}- (cgfloat)waterfiowview:(waterfiowview *)waterfiowview marginfortype:(waterfiowviewmargintype)type

}- (void)waterfiowview:(waterfiowview *)waterfiowview didselectatindex:(nsuinteger)index

－－－－－－－－－－－

執行效果

簡單瀑布流實現

瀑布流通常2種形式 1.固定n列 固定寬度 列中高度不等，如 花瓣網 列數可根據瀏覽器視覺化視窗大小改變 也可固定 當最低的那列到達可視區的底部，再次載入資料 當前列的offsetheight offsettop scrolltop clientheight 瀑布流 title 6 style 7 ...

簡單html css實現瀑布流

看網上的大牛的瀑布流實現真的頭都大，嫌麻煩，偶發現css新出的column count和break inside屬性就可以輕易實現，下面是實現過程 container item box v for item,index in list key index container item box v f...

swift簡單瀑布流的實現

1.viewcontroller 設定collectionview布局資訊 import uikit import sdwebimage import mjrefresh class yfwate llviewcontroller uiviewcontroller uicollectionviewd...