目錄
ios與android在實現列表介面的時候是有重用機制的，目的就是減少記憶體開銷，用時間換空間。個人感覺flutter並沒有特別強調復用，關於listview.builder 的「復用」個人感覺應該是銷毀跟重建的過程，所以這裡用flutter實現了簡單的復用機制。**拙劣，大神勿噴，共同進步
右側是簡單實現瀑布流介面，裡面顯示的是一共有39個widget。左側是控制台列印一共建立的12個widget，所以這裡就簡單的實現了widget復用。
這裡先簡單的說一下實現思路。
tip: wate***llflow.dart 瀑布流主頁面；wate***llflowitem.dart 瀑布流單元item
效果展示：
wate***llflowitem.dart 瀑布流item檔案
class wate***llflowitem extends statefulwidget)
frame getframe()
void setframe()
@override
stategaadmzgsfulwidget> createstate()
}class wate***llflowitemstate extends state with automatickeepaliveclientmixin )
void setframe() );
} @override
widget build(buildcontext context) ,));
} @override
// todo: implement wantkeepalive
bool get wantkeepalive => true;
}wate***llflow.dart 主介面檔案
builder 實現
@override
widget build(buildcontext context)
宣告的屬性
//瀑布流間隔
double sep = 5;
//瀑布流寬度
double? _width;
//最大高度
double _maxheight = 0;
//左側最大高度
double leftheight = 0;
//右側最大高度
double rightheight = 0;
//主介面高度
double _minecontentheight = 0;
//瀑布流item快取池
list _bufferpoolwidget = ;
//當前顯示的瀑布流item
list _listwidget = ;
//當前組渲染frame物件儲存
list _flist = ;
//總frame集合
list _framelist = ;
//資料來源這裡只儲存高度
list _list = [
100,150,45,11,140,89,212,21,434,545,100,150,45,11,140,89,212,21,434,545,
100,150,45,11,140,89,212,21,434,545,100,150,45,11,140,89,212,21,434,545];
//滑動監聽
scrollcontroller _scrollcontroller = new scrollcontroller();
//滑動偏移量
double _scrolloff = 0;
計算主視窗scrollview 高度
//獲取最大高度，並計算出全部的瀑布流位置
void getmaxheight() else
flist.add(frame);
} _maxheight = max(leftheight, rightheight);
_framelist.addall(flist);
//重新整理
setstate(() {});
}frame 位置資訊類
class frame)
}生成瀑布流widget單元item
//重用池裡生成item
_takereuseflowitem(frame f,dynamic block)
//沒有，直接建立(不快取中的，需要呼叫setstate方法渲染)
if(wate***llflowitem == null)
block(wate***llflowitem,isreuse);
}建立首屏全部可視瀑布流widget單元元件
//渲染瀑布流item
createwate***llflow(int index));}}
setstate(() );
});}
滑動過程中進行重用渲染
//獲取上滑狀態當前顯示的下乙個item位置
frame? _getupneedshowframe()
return f;
}//獲取下滑狀態當前顯示的上乙個item位置
frame? _getdownneedshowframe()
return f;
}//超出介面可視範圍的瀑布流加入快取池
void addflowitemaddtobufferpool()
} if(list.length != 0)
}} //從快取池裡獲取item
//上滑狀態
frame? upnextframe = _getupneedshowframe();
if(upnextframe != null) ,$,$');
if(upnextframe.top <= _minecontentheight + _scrolloff) 個frame');
_takereuseflowitem(upnextframe,(wate***llflowitem wate***llflowitem,bool isreuse));
} else
});}
} //下滑狀態
frame? downnextframe = _getdownneedshowframe();
if(downnextframe != null) ,$,$');
if(downnextframe.top + downnextframe.heigth > _scrolloff && downnextframe.top + downnextframe.heigth < _minecontentheight + _scrolloff) 個frame');
_takereuseflowitem(downnextframe,(wate***llflowitem wate***llflowitem,bool isreuse));
} else
});}
}}滾動監聽
_scrollcontroller.addlistener(() 個');
});基本上flutter的瀑布流復用邏輯就完成了，**拙劣，裡面有些地方需要優化，比如：快速滑動防護，item的內容渲染。flutter對於介面渲染已經很極致了，重寫復用有點倒退的趕腳。大神勿噴，互相學習。
原生js寫瀑布流
準備用自學的jquery寫的，但是不熟悉api，忘得乾乾淨淨了，然後我覺得我直接用js寫比用jquery還要簡單一點 這是html布局 js 1.獲取視口的寬度，獲取每個的寬度 2.遍歷迴圈每個 3.設定top和left top 第一行設定為0,第二行開始 最小高度 left i imgw 必須等所...
瀑布布局流 原生js
首先html和css 然後單單左浮動是不會 插空 插入的，這裡就是我們的重點啦。首先 都是要絕對定位的。確定好乙個頁面有多少列，每插入一張就計算每一列的高度，取最短的那列插入，計算該插入的top和left再賦值，絕對定位定在那裡，就ok啦 function wate ll parent,pin el...
js原生實現瀑布流
1.確定瀏覽器顯示區域內，一行放多少列盒子 寬度一致，高度由內容撐開 1.1 獲取頁面寬度 1.2 獲取盒子寬度 1.3 顯示的列數 頁面寬度 盒子寬度 2.確定列數之後，先排列第一行 2.1 顯示的列數 頁面寬度 盒子寬度 間隙 2.2for迴圈裡判斷 當i 盒子的索引 小於column 列數 的...