React 瀑布流布局的實現 (移動端)

2021-09-25 15:02:28 字數 780 閱讀 4749

使用react 實現移動端的瀑布流布局總而言之來講就乙個概念:

看到布局中的那根紅線沒有!沒錯!將整體布局分成兩份,那麼就意味著我們將講資料分為兩份,

然後根據兩邊的高度(哪邊少往那邊加內容)去渲染兩個盒子,然後達到乙個瀑布流的效果

貼**:

import react,  from 'react';

import from'react-redux'

import axios from '[email protected]@axios';

class wate***ll extends component

}gethw(data)else

})this.setstate();//重新set state

}render() = this.state;

console.log(leftdata,rightdata)

return (

alt= key=//>})

}alt= key=//>})});

}componentdidmount())

this.gethw(this.props.data) //呼叫

})}}

export default connect(

(state)=>

})(wate***ll);

實現瀑布流布局

瀑布流,又稱瀑布流式布局。是比較流行的一種 頁面布局,視覺表現為參差不齊的多欄布局,隨著頁面滾動條向下滾動,這種布局還會不斷載入資料塊並附加至當前尾部,瀑布流的主要特性便是錯落有致,定寬而不定高的設計讓頁面區別於傳統的矩陣式布局模式。主體思路是記錄每一列的高度,父容器相對定位,成員絕對定位,利用to...

瀑布流布局

最近在看瀑布流布局,覺得很神奇,每個模組都可以找到自己應該在的地方,各列齊頭並進,給人一種很high的感覺。一開始自己也想了思路 模組1,模組2,裡面模組float left。結果試了一下,悲劇啊,不同高度的直接就掛了,布局亂了。等高的還可以。然後我又想分類,就是規定幾列,分別把模組順序載入在各個c...

瀑布流布局

很早以前我就想自己學寫一下瀑布流布局,可是由於懶神來找我聊天咯,所以推遲咯很久直到今天我才來寫瀑布流布局。由於鄙人的js還有很大的提公升空間,所以我是先看咯一下那些大神的具體講解和分析,然後才開始著手寫的,收穫那是槓槓的。1 大家都知道要想實現瀑布流,就必須規定每乙個區塊的寬度要一致 2 確定每一排...