瀑布流和下拉載入
import React from ‘react’
import Masonry from ‘masonry-layout’
import InfiniteScroll from ‘react-infinite-scroller’
import imagesLoaded from ‘imagesloaded’
import axios from ‘axios’
import ‘./styles.less’
const arr = [
‘https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3008142408,2229729459&fm=26&gp=0.jpg’,
‘https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2458227883,4095122505&fm=26&gp=0.jpg’,
‘https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1761250919,1896060533&fm=26&gp=0.jpg’,
‘https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2852083094,372235004&fm=26&gp=0.jpg’,
‘https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3104686528,572431609&fm=26&gp=0.jpg’,
]
// columnWidth: 200,
// itemSelector: ‘.grid-item’ // 要佈局的網格元素
// gutter: 10 // 網格間水平方向邊距,垂直方向邊距使用css的margin-bottom設定
// stamp:’.grid-stamp’ // 網格中的固定元素,不會因重新佈局改變位置,移動元素填充到固定元素下方
// fitWidth: true // 設定網格容器寬度等於網格寬度,這樣配合css的auto margin實現居中顯示
// originLeft: true // 預設true網格左對齊,設為false變為右對齊
// originTop: true // 預設true網格對齊頂部,設為false對齊底部
// containerStyle: { position: ‘relative’ } // 設定容器樣式
// transitionDuration: ‘0.8s’ // 改變位置或變為顯示後,重佈局變換的持續時間,時間格式為css的時間格式
// stagger: ‘0.03s’ // 重佈局時網格並不是一起變換的,排在後面的網格比前一個延遲開始,該項設定延遲時間
// resize: false // 改變視窗大小將不會影響佈局
// initLayout: true // 初始化佈局,設未true可手動初試化佈局
export default class extends React.PureComponent {
constructor (props) {
super(props)
this.state = {
hasMore: true, // 是否開啟下拉載入
data: [], // 接受我每次的資料
count: 0,
width: '',
}
}
componentDidMount () {
this.loadMoreData()
}
advanceWidth = () => {
// 第一個引數 你要對哪個節點內的元素做瀑布流
new Masonry(document.querySelector(’.pages-hoc’), {
itemSelector: ‘.d’, // 要佈局的網格元素
fitWidth: true, // 設定網格容器寬度等於網格寬度
gutter: 20,
columnWidth: ‘.d’,
originLeft: true,
})
}
// 載入更多資料
loadMoreData = (page = 1) => {
// page 當前滾動到了第幾頁
const { data, count } = this.state
// 超過200條資料 不繼續監聽下拉事件
if (count && data.length >= count) {
return false
}
// page 是當前請求第幾頁資料
// limit 每頁我需要返回的資料條數
axios.post(’/api/Home/Apis/sampleList’, { data: { page, limit: 10 } })
.then(res => {
this.setState({
data: […data, …arr],
count: res.count,
// 瀑布流
}, this.advanceWidth)
})
.catch(err => console.log(err))
}
render () {
const { hasMore } = this.state
return (
<div className="pages-login">
<InfiniteScroll
initialLoad={false} // 不讓它進入直接載入
pageStart={1} // 設定初始化請求的頁數
loadMore={this.loadMoreData} // 監聽的ajax請求
hasMore={hasMore} // 是否繼續監聽滾動事件 true 監聽 | false 不再監聽
useWindow={false}
threshold={50}
>
<div className="pages-hoc">
{
this.state.data.map((value, key) => (
<div key={key} className="d">
{key%2 === 0 ? <p className="d1"></p> : <p className="d2"></p>}
</div>
))
}
</div>
</InfiniteScroll>
</div>
)
}
}