### File

`src/modules/lesson/flowtest/flowfather/flowfather.component.ts`

### Metadata

selector | `app-flowfather`
styleUrls | `flowfather.component.scss`
templateUrl | `flowfather.component.html`

### Inputs

`list` | 根据@Input传参数组,实现分组效果 Type: `any[]`

### Constructor

`constructor()`

### Methods

convertListToDisplay
`convertListToDisplay(list: any[])`
Returns: `void`

convertListToDisplayByHeight
`convertListToDisplayByHeight()`
排列方式2: 列高度填满优先 Returns: `void`

### Properties

columnCount
`columnCount: `number` </bcode>`
Default value: `4`
排列方式1: 列元素数量优先

displayColumnIdList
`displayColumnIdList: `number[]` </bcode>`

displayList
`displayList: `any[][]` </bcode>`

    import { Component, Input, OnInit } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { IonicModule } from '@ionic/angular';

    @Component({
      selector: 'app-flowfather',
      templateUrl: './flowfather.component.html',
      styleUrls: ['./flowfather.component.scss'],

    })
    export class FlowfatherComponent {
      /**
        * 根据@Input传参数组,实现分组效果
        */
      @Input() list: Array<any> = []
      displayList: Array<Array<any>> = []
      constructor() {
        console.log("list contructor", this.list)
      }
      ngOnInit(): void {
        console.log("list ngOnInit", this.list)
        this.displayList = this.convertListToDisplay(this.list)
      }

      /**
       * 排列方式1: 列元素数量优先
       * @desc 根据列数取余
       * 用于列元素高度相差不大的情况下
       * 外层传入的列表,进行分组排列,实现瀑布流
       */
      columnCount = 4
      displayColumnIdList: Array<number> = []
      convertListToDisplay(list: any[]) {
        let displayList: Array<Array<any>> = [[]]
        list.forEach((item: any, index: number) => {
          let colIndex = index % this.columnCount
          if (!displayList[colIndex]) displayList[colIndex] = [] // 空值校验并补全空数组
          displayList[colIndex].push(item)
        })
        this.displayColumnIdList = displayList.map((item, index) => index)
        return displayList
      }
      /**
        * 排列方式2: 列高度填满优先
        * @desc 根据三列最低高度推送元素
        * 用于列元素高度相差较大的情况下
        */
      convertListToDisplayByHeight() {

      }

    }

# results matching ""

# No results matching ""