05 自定義瀑布流

2021-07-10 09:14:32 字數 1085 閱讀 1075

自定義了乙個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應分配在左側,...