關於瀑布流

2021-07-04 19:12:54 字數 577 閱讀 4845

鑑於現今瀑布流的流行,上次面試的時候又遇到了這個問題,可我確實沒有實現過,一時問起確實只知道用float:left的方式。

1.固定列寬和列數,列設定float:left,乙個列就是乙個內容塊,載入內容就選擇載入到各列中

2.使用css3的多列布局

前兩種方式比較簡單,而所謂最大的缺陷也就是列數目已確定而已,在移動端上實現起來比較方便,畢竟螢幕基本不能resize,橫豎屏切換的時候調整一下就好。

3.js動態計算,需要知道內容塊的高度,動態設定內容塊的top、left屬性

文章提到的第三種方式,使用js動態計算各模組位置的方法,儘管在resize的時候比較耗效能,但沒有改變dom結構,而且resize畢竟不是很頻繁的乙個使用者操作。

「花瓣」相比pinterest還加入了transition效果,使得在重新排列的時候多了乙個動態效果。

曾想過用第1,2種方法來動態計算列數,但缺點在於需要改變dom結構,而且使用1,2種方法來計算就達不到上述的動態效果。

具體例子有:

pinterest

花瓣masonry  

isotope  

jquery庫的瀑布流外掛程式  

瀑布流函式

在jquery物件後面新增瀑布流函式 function 其他行 else 其他行 top 每列中的最小值 即最低的那一列 val css 修改高度陣列 最小高度 最小高度 當前子元素高度 arrheight minindex minheight height 查詢高度 最大值 var maxinde...

iOS CollectionView瀑布流框架搭建

collectionview實現以下效果.思路 先說一下這個效果的實現思路,首先需要確定該瀑布流有多少列,然後需要確定每個cell 的高度,用乙個陣列記錄下每一列的已新增上去的cell的高度和.然後新增下乙個cell的時候找出所有列中高度最小的列,再新增上去.例如 在該例子中,總共有兩列,當新增完第...

瀑布流處理

瀑布流就是用來解決展示時出現空白頁面的問題 這裡可以再前端頁面直接寫 2.js裡物件中,this 物件 再函式中,this window 注釋都寫在 裡,簡單明瞭 前端頁面 105西 modelsfrom django.db import models class img models.model ...