Angular实现九宫格布局-CFANZ编程社区

Angular实现九宫格布局

step1: D:\vue\untitled2905\src\app\app.component.css 九宫格布局

.sudoku_row{
  display: flex;
  align-items: center;
  width:100%;
  flex-wrap: wrap;
}
.sudoku_item{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width:32%;
  padding-top: 10px;
  padding-bottom: 10px;
}
.opacity{
  opacity: 0.4;
  background: #e5e5e5;
}
.sudoku_item img{
  margin-bottom: 3px;
  display: block;
  width: 400px;
  height: 400px;
}

step2: D:\vue\untitled2905\src\app\app.component.html 循环布局显示

<html>
<head lang="en">
  <title></title>
</head>
<body>
<div class="sudoku" id="app">
  <div class="sudoku_row">
    <a *ngFor="let product of messages"
       class="sudoku_item"
    (click)="getData(product.name)">
      <img src="{{ product.img_src }}" alt="">
      <div class="item-meta">
        <h2>{{ product.id}}</h2>
        <p>{{ product.name }}</p>
      </div>
    </a>
  </div>
</div>
</body>
</html>

step3: D:\vue\untitled2905\src\app\app.component.ts 数据源和点击事件交互响应

import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'untitled2905';
  messages = [{
    id: 0,
    name: '飞机',
    img_src: 'http://www.gov.cn/xinwen/2022-03/23/5680897/images/48df7b94e70d490ebf72952375e91ea5.jpg'
  }, {
    id: 1,
    name: '游戏',
    img_src: 'http://www.gov.cn/xinwen/2022-03/23/5680897/images/31e347d1993b427590831853751e234a.jpg'
  }, {
    id: 2,
    name: '音乐',
    img_src: 'http://www.gov.cn/xinwen/2022-01/11/5667625/images/331282d29e494c75b5fa4e5bbe9d6ea5.jpg'
  }, {
    id: 3,
    name: '物流',
    img_src: 'http://www.gov.cn/xinwen/2022-01/11/5667625/images/acd7819431f843968579482ebb88a383.jpg'
  }, {
    id: 4,
    name: '活动',
    img_src: 'http://www.gov.cn/xinwen/2022-01/11/5667625/images/189767452a08421d834d8f004e202f95.jpg'
  }, {
    id: 5,
    name: '植树',
    img_src: 'http://www.gov.cn/xinwen/2022-01/11/5667625/images/6fb50bd56cc647baa0d3c2bfff1b83be.jpg'
  }, {
    id: 6,
    name: '劳动',
    img_src: 'http://www.gov.cn/xinwen/2022-01/11/5667625/images/56801059b331462b8849e00f8c1f000c.jpg'
  }
  ];

  getData(name: string) {
    console.log(name);
  }
}

run,success!!

end