Ionic3实现图片瀑布流布局

本篇文章主要介绍了Ionic3实现图片瀑布流布局，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

瀑布流布局是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。

瀑布流布局一般使用在网页中，在移动端用的比较少但是也不可缺。下面就介绍一下如何在ionic3中使用瀑布流布局。

首先创建一个项目，这里不多做介绍。我们用about这个模块来进行瀑布流的开发。

这里先介绍一下实现的流程：

我们先要定义一个container，在container中存在有多个box，box里面放置图片。

1、首先获取container中的所有box。

2、获取box的宽度和屏幕的宽度。

3、获取在当前屏幕宽度下一行可以放置多少个box。

4、将所有的box的高度放到一个数组当中。

5、遍历数组，获取到第一行中最高度最小的box。

6、遍历数组的下标到达第二行的时候将第二排的首元素放在第一行的高度最低的元素下面。（比如一行放了三个box，其中第三个高度最低，那么第四个就放在第三个box的下面。）

7、将元素放在最低元素下面后，则将第三个元素和第四个元素高度相加成为一个新的第三个元素，同样重复即可实现。

下面是详细代码

about.html

     ![]({{image.src}})

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-600" }, { src: "assets/images/b.jpg-600" }, { src: "assets/images/c.jpg-600" }, { src: "assets/images/d.jpg-600" }, { src: "assets/images/e.jpg-600" }, { src: "assets/images/f.jpg-600" }, { src: "assets/images/g.jpg-600" }, { src: "assets/images/h.jpg-600" }, { src: "assets/images/i.jpg-600" }, { src: "assets/images/j.jpg-600" }, { src: "assets/images/k.jpg-600" }, { src: "assets/images/l.jpg-600" }, { src: "assets/images/m.jpg-600" }, { src: "assets/images/n.jpg-600" }, { src: "assets/images/o.jpg-600" }] 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  { infiniteScroll.complete() }, 1000); } }

最终效果：