自定義了乙個uicollectionviewflowlayout的子類,在使用的時候需要建立自定義flow layout的物件,實現協議方法來實現瀑布流效果
一、原理
首先,獲得的尺寸,一般在資料中都會給出的尺寸
計算itemwidth,假設瀑布流為兩行, itemwidth = (screenwidth - 3 * 間距) / 2.0;
itemheight = 原先的高 * itemwidth / (原來的寬 floatvalue);
設定itemsize
計算當前已經排列的兩列中那一列最短
將當前的放在上面
重複執行以上步驟
二、使用
將檔案bhflowlayout匯入
// 建立
bhflowlayout *flowlayout = [[bhflowlayout alloc] init];
// 邊框
flowlayout.edgeinsets = uiedgeinsetsmake(5, 5, 5, 5);
// 列數
flowlayout.columncounts = 2;
// 列間距
flowlayout.columnspace = 5;
// 行間距
flowlayout.rowspace = 5;
// 籤協議,bhflowlayoutdelegate
// 指定**人**人
flowlayout.delegate = self;
實現協議方法,指定itemsize的高度
// 計算item的高
- (cgfloat)bhflowlayout:(bhflowlayout *)flowlayout heightforrowatindexpath:(nsindexpath *)indexpath width:(cgfloat)width
三、效果圖
自定義瀑布流
在.h裡 class,在.m裡 import class dkflowlayout protocol dkflowlayoutdelegate cgfloat layout dkflowlayout layout heightforitematindexpath nsindexpath indexp...
瀑布流布局與自定義瀑布流布局外掛程式
瀑布流布局是網頁中經常採用的一種布局方式,其布局有如下特點 瀑布流布局特點 1 元素按列排放 2 列寬一致,但高度不等 3 布局過程中將優先向高度最小的列補充資料 以下是自定義的乙個jquery瀑布流外掛程式 jquery.mywaterfull.js function arrheight.push...
學習筆記05 css布局 瀑布流
1.每個item由一張和下方的文字構成 2.通過改變的高度,實現整體item的高度差 1.獲取列表 2.遍歷,隨機生成一定高度範圍內的陣列,將 height px 的style樣式,給每乙個img標籤 3.宣告兩個變數 左側總高度,右側總高度 4.遍歷,if左側總高 右側總高,item應分配在左側,...