Ionic 3 이미지 폭포 흐름 구조 실현

폭포 흐름 구 조 는 비교적 유행 하 는 사이트 페이지 구조 로 시각 적 으로 들쭉날쭉 한 다 중 표시 줄 구조 로 나타 나 며 페이지 스크롤 바 가 아래로 굴 러 가면 서 이런 구 조 는 데이터 블록 을 계속 불 러 오고 현재 꼬리 에 추가 할 것 이다.
폭포 흐름 구 조 는 일반적으로 웹 페이지 에 사용 되 는데 모 바 일 에서 사용 하 는 것 이 비교적 적 지만 없어 서 는 안 된다.ionic 3 에서 폭포 흐름 구 조 를 어떻게 사용 하 는 지 소개 한다.
우선 프로젝트 를 만 듭 니 다.여 기 는 소개 가 많 지 않 습 니 다.우 리 는 about 이 모듈 로 폭포 류 의 개발 을 진행한다.
여기 서 먼저 실현 되 는 절 차 를 소개 합 니 다.

먼저 container 를 정의 해 야 합 니 다.container 에 여러 개의 box 가 존재 하고 box 에 그림 을 배치 해 야 합 니 다.
1.먼저 container 의 모든 box 를 가 져 옵 니 다.
2.box 의 너비 와 화면의 폭 을 가 져 옵 니 다.
3.현재 화면 너비 의 다음 줄 에 몇 개의 box 를 배치 할 수 있 는 지 가 져 옵 니 다.
4.모든 box 의 높이 를 한 배열 에 넣 습 니 다.
5.배열 을 옮 겨 다 니 며 첫 줄 에서 가장 높이 가 작은 box 를 가 져 옵 니 다.
6.배열 의 아래 표 시 를 두 번 째 줄 에 도 착 했 을 때 두 번 째 줄 의 첫 번 째 요 소 를 첫 번 째 줄 의 높이 가 가장 낮은 요소 아래 에 놓 습 니 다.(예 를 들 어 한 줄 에 세 개의 box 를 놓 았 는데 그 중에서 세 번 째 높이 가 가장 낮 으 면 네 번 째 는 세 번 째 box 아래 에 놓는다.)
7.원 소 를 최소 요소 아래 에 두 면 세 번 째 요소 와 네 번 째 요소 의 높이 를 새로운 세 번 째 요소 로 추가 하고 똑 같이 반복 하면 실현 할 수 있다.
다음은 상세 코드 입 니 다.
about.html

<ion-content>
  <div id="container">
    <div class="box" *ngFor="let image of img_data">
      <div class="box_img">
        ![]({{image.src}})
      </div>
    </div>
  </div>
  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content loadingSpinner="circles" loadingText="    ...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

about.scss

page-about {
  ion-content {
    #container {
      position: relative;
      .box {
        padding: 5px;
        float: left;
        .box_img {
          padding: 5px;
          border: 1px solid #cccccc;
          box-shadow: 0 0 5px #ccc;
          border-radius: 5px;
          img {
            width: 150px!important;
            height: auto;
          }
        }
      }
    }
  }
}

about.ts

import { Component } from '@angular/core';
import { NavController, IonicPage } from 'ionic-angular';
@IonicPage({
 name: 'about'
})
@Component({
 selector: 'page-about',
 templateUrl: 'about.html'
})
export class AboutPage {
 img_data = [{
  src: "assets/images/a.jpg"
 }, {
  src: "assets/images/b.jpg"
 }, {
  src: "assets/images/c.jpg"
 }, {
  src: "assets/images/d.jpg"
 }, {
  src: "assets/images/e.jpg"
 }, {
  src: "assets/images/f.jpg"
 }, {
  src: "assets/images/g.jpg"
 }, {
  src: "assets/images/h.jpg"
 }, {
  src: "assets/images/i.jpg"
 }, {
  src: "assets/images/j.jpg"
 }, {
  src: "assets/images/k.jpg"
 }, {
  src: "assets/images/l.jpg"
 }, {
  src: "assets/images/m.jpg"
 }, {
  src: "assets/images/n.jpg"
 }, {
  src: "assets/images/o.jpg"
 }]
 constructor(public navCtrl: NavController) {

 }

 ngAfterViewInit() {

 }
 ionViewWillEnter() {
  this.getNode();
 }
 getNode() {
  let parentNode = document.getElementById("container");
  let childNodeArray: any = parentNode.getElementsByClassName("box");
  let screenWidth = document.documentElement.clientWidth;
  let childWidth = childNodeArray[0].offsetWidth;
  let num = Math.floor(screenWidth / childWidth); //          Math.floor()     
  parentNode.style.cssText = "width:" + childWidth * num + "px; margin:0 auto"; //  container       
  this.setImagePosition(num, childNodeArray);
 }

 setImagePosition(num, childArray) {
  var imgHeightArray = [];//               
  for (var i = 0; i < childArray.length; i++) { //      
   if (i < num) {
    imgHeightArray[i] = childArray[i].offsetHeight; //          
   } else {
    var minHeight = Math.min.apply(null, imgHeightArray); //               
    var minIndex = this.getMinHeight(imgHeightArray, minHeight); //              
    childArray[i].style.position = "absolute"; //      
    childArray[i].style.top = minHeight + "px"; //       
    childArray[i].style.left = childArray[minIndex].offsetLeft + "px"; //       
    imgHeightArray[minIndex] = imgHeightArray[minIndex] + childArray[i].offsetHeight; //      box         box  
   }
  }
 }

 getMinHeight(imgHeightArray, minHeight) {
  for (var i in imgHeightArray) {
   if (imgHeightArray[i] == minHeight) { //                        i 
    return i;
   }
  }
 }
//     ionic                    
 doInfinite(infiniteScroll) {
  let parentNode = document.getElementById("container");
  for (var i = 0; i < this.img_data.length; i++) {
   let divNode = document.createElement("div"); //  div  
   divNode.className = "box";//     box  
   parentNode.appendChild(divNode);//     
   let subDivNode = document.createElement("div");//    
   subDivNode.className = "box_img";//       
   divNode.appendChild(subDivNode);//     
   var img = document.createElement("img");//    
   img.src = this.img_data[i].src;//      
   subDivNode.appendChild(img);//     
  }
  this.getNode();
  setTimeout(() => { infiniteScroll.complete() }, 1000);
 }
}

최종 효과:

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.