橫向瀑布流實現

2021-09-25 18:36:53 字數 2890 閱讀 7942

//原始資料


materiallist:any;


//計算好的陣列


calcmateriallist =


;//行高度


imgheight=


145;


//右邊距


imgright=8;


//下邊距


imgbottom=8;


//容器寬度


containerwidth =


412;


//記錄當前行高度


maxwidth:number =0;


//記錄行數


imglinenumber =


0;
[


]
接下來就直接上邏輯了：

//橫向瀑布流計算


//data為陣列


calcmatrix


(data)


=this


;let width;


let height;


let divwidth;


if(data.length >0)


//超出剩餘寬度，但是超出範圍不是很大，擷取


if(width +


this


.maxwidth > containerwidth && width *


0.95


+this


.maxwidth <= containerwidth)


//超出剩餘寬度範圍過大（剩餘寬度過小），從剩餘資料中取一張差不多的


if(width *


0.95


+this


.maxwidth > containerwidth &&


!data[0]


.isfirst)


else}if


(data[0]


.isfirst)


//當前行有多張


if(containerwidth-


this


.maxwidth < width *


0.5&& containerwidth-


this


.maxwidth <


100)


else


this


.calcmateriallist[i]


.imgwidth =


this


.calcmateriallist[i]


.divwidth;


this


.calcmateriallist[i]


.imgheight = math.


floor


(this


.calcmateriallist[i]


.imgwidth/qimgwidth*


this


.calcmateriallist[i]


.imgheight);}


}this


.maxwidth =0;


this


.imglinenumber++


; data[0]


.isfirst =


false


;this


.calcmatrix


(data)


;return;}


//其他情況都是擷取當前行的其他，當前塞進當前行


//超出寬度


let overstepwidth = width - containerwidth +


this


.maxwidth;


let islinewidth =0;


for(


let i =


0; i <


this


.calcmateriallist.length;i++)}


divwidth = math.


floor


(containerwidth-islinewidth)


;this


.maxwidth =0;


this


.handlematerialarr


(width,imgheight,divwidth,data,


false);


return;}


this


.maxwidth += math.


floor


(width + imgright)


;this


.handlematerialarr


(width,imgheight,width,data,


true);


}}handlematerialarr


(width,height,divwidth,arr,ismargin)


arr[0]


.imgwidth = math.


floor


(width)


; arr[0]


.imgheight = height;


arr[0]


.divwidth = math.


floor


(divwidth)


; arr[0]


.imglinenumber =


this


.imglinenumber;


arr[0]


.ismargin = ismargin;


this


.calcmateriallist.


push


(arr[0]


);arr.


shift()


;this


.calcmatrix


(arr);}


/** * 找到與目標最接近的


*/findclosenum


(arr, num)


}return index // 返回最接近的的索引


}
)

瀑布流實現

html 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 js 一定要用window.onload不能用 function var data window.onload function pbl pbl function pbl...

瀑布流簡單實現

使用scrollview簡單實現瀑布流 實現 waterflowview.h import typedefenumwaterfiowviewmargintype class waterflowviewcell,waterfiowview 資料來源方法 protocol waterflowviewda...

JavaScript 實現瀑布流

一 前言 瀑布流現在是乙個非常常用的布局方式了，尤其在購物平台上，例如蘑菇街，等等。二 流程 1 在html檔案中寫出布局的元素內容 2 在css檔案中整體對每乙個必要的元素進行樣式和浮動設定 3 在js檔案中動態實現布局，每乙個滾動時，都要重新整理布局。三 思想 實現瀑布流，就是每次當前一列的顯示...