react 瀑布流

首先先 配置好插件

imagesloaded 網址：https://segmentfault.com/a/1190000007316974
react-lazyload 網址：https://www.npmjs.com/package/react-lazyload
react-infinite-scroller 網址：https://www.npmjs.com/package/react-infinite-scroller

　　

下面列出他的一些常用屬性

// columnWidth: 200,
// itemSelector: '.grid-item' // 要布局的網格元素
// gutter: 10 // 網格間水平方向邊距，垂直方向邊距使用css的margin-bottom設置
// percentPosition: true // 使用columnWidth對應元素的百分比尺寸
// 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可手動初試化布局

　

注意： 里面有個這屬性 hasMore， 判斷后台數據，如果為最后一條了。把他設置成false, 不再監聽滾動條。讓他不再請求數據。

import React, { Component } from 'react'
import Masonry from 'masonry-layout'  //實現瀑布流
import imagesloaded  from 'imagesloaded' //監聽圖片加載
import InfiniteScroll from 'react-infinite-scroller' //下拉加載
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://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3437217665,1564280326&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/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2944705163,3932100810&fm=26&gp=0.jpg',
  'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3104686528,572431609&fm=26&gp=0.jpg',
]

export default class Pinterest extends Component {
  state = {
    data: arr,
    hasMore: true, // 是否開啟下拉加載
  }
  
  componentDidMount () {
    // this.loadMoreData()
    this.imagesOnload()
  }
  //圖片懶加載
  imagesOnload = () => {
    const elLoad = imagesloaded('.pages_hoc')  //獲取下拉加載里面的第一個盒子
    //always 圖片已全部加載，或被確認加載失敗
    elLoad.on('always', () => {
      // 調用瀑布流
      this.advanceWidth()
    })
  }

  //瀑布流
  advanceWidth = () => {
    var elem = document.querySelector('.pages_hoc');

    new Masonry( elem, {
      itemSelector: '.imgBox', //要布局的網格元素
      columnWidth: '.imgBox', //自適應
      fitWidth: true, // 設置網格容器寬度等於網格寬度
      gutter: 20,
    });
  }

  // 下拉加載
  loadMoreData = () => {
    const { data } = this.state
    axios.post('https://blogs.zdldove.top/Home/Apis/listWithPage')
      .then(res => {
        console.log(res)
        this.setState({
          data: [...data, ...arr] //拼接每次加載的數據 arr是我自定義的數據
        }, () => {
          this.imagesOnload() // 每次獲取完數據 觸發
        })
      })
  }

  render() {
    const { data, hasMore } = this.state

    return (
      <div className='pages_pinterest'>
        {/* 下拉加載 */}
        <InfiniteScroll
          initialLoad={false} // 不讓它進入直接加載
          // pageStart={1} // 設置初始化請求的頁數
          loadMore={this.loadMoreData}  // 監聽的ajax請求
          hasMore={hasMore} // 是否繼續監聽滾動事件 true 監聽 | false 不再監聽
          useWindow={false} // 不監聽 window 滾動條
        >
          <div className="pages_hoc">
            {
              data.map((item, index) => {
                return (
                  <div key={index} className='imgBox'>
                    <img src={item} />
                  </div>
                )
              })
            }
          </div>
        </InfiniteScroll>
      </div>
    )
  }
}

　　

.pages_pinterest{
  width: 99%;
  height: 100%;
  border: 2px solid red;
  overflow: hidden;
  overflow: auto;
  box-sizing: border-box;
  .pages_hoc{
    height: 100%;
    margin: 0 auto;
    .imgBox{
      width: 400px;
      border: 2px solid red;
      margin-bottom: 20px;
      img{
        vertical-align: top;
      }
    }
  }
}