Ionic3实现图片瀑布流布局


Posted in Javascript onAugust 09, 2017

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

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

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

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

Ionic3实现图片瀑布流布局

我们先要定义一个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);
 }
}

最终效果:

Ionic3实现图片瀑布流布局

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js href的用法
May 13 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
Feb 07 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
Mar 01 Javascript
Javascript跨域请求的4种解决方式
Mar 17 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
May 13 Javascript
Javascript中克隆一个数组的实现代码
Dec 06 Javascript
JavaScript学习笔记之Function对象
Jan 22 Javascript
jquery实现图片水平滚动效果代码分享
Aug 26 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
浅析JavaScript中命名空间namespace模式
Jun 22 Javascript
详解plotly.js 绘图库入门使用教程
Feb 23 Javascript
Vue点击切换Class变化,实现Active当前样式操作
Jul 17 Javascript
JavaScript闭包和回调详解
Aug 09 #Javascript
ionic 3.0+ 项目搭建运行环境的教程
Aug 09 #Javascript
JavaScript实现的浏览器下载文件的方法
Aug 09 #Javascript
Node.js五大应用性能技巧小结(必须收藏)
Aug 09 #Javascript
详解用node搭建简单的静态资源管理器
Aug 09 #Javascript
vue页面使用阿里oss上传功能的实例(二)
Aug 09 #Javascript
vue.js框架实现表单排序和分页效果
Aug 09 #Javascript
You might like
关于PHP递归算法和应用方法介绍
2013/04/15 PHP
php 常用的系统函数
2017/02/07 PHP
php 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
PHP使用Session实现上传进度功能详解
2019/08/06 PHP
PHP扩展类型及安装方式解析
2020/04/27 PHP
jQuery的一些注意
2006/12/06 Javascript
jQuery Selector选择器小结
2010/05/06 Javascript
Js获取数组最大和最小值示例代码
2013/10/29 Javascript
Jquery简单分页实现方法
2015/07/24 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
canvas绘制环形进度条
2017/02/23 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
VUE DOM加载后执行自定义事件的方法
2018/09/07 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
2019/02/19 jQuery
jquery中为什么能用$操作
2019/06/18 jQuery
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
vue3.0搭配.net core实现文件上传组件
2020/10/29 Javascript
[01:45]典藏宝瓶2+祈求者身心——这就是DOTA2TI9总奖金突破3000万美元的秘密
2019/07/21 DOTA
pyqt4教程之实现windows窗口小示例分享
2014/03/07 Python
python从入门到精通(DAY 3)
2015/12/20 Python
python检测IP地址变化并触发事件
2018/12/26 Python
在python带权重的列表中随机取值的方法
2019/01/23 Python
python基于SMTP协议发送邮件
2019/05/31 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
520使用Python实现“我爱你”表白
2020/05/20 Python
python里反向传播算法详解
2020/11/22 Python
python抢购软件/插件/脚本附完整源码
2021/03/04 Python
纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)
2014/05/07 HTML / CSS
HTML5实践-图片设置成灰度图
2012/11/12 HTML / CSS
蒙蒂塞罗商店:Monticello Shop
2018/11/25 全球购物
Hotels.com越南:酒店预订
2019/10/29 全球购物
学校十一活动方案
2014/02/01 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
详细介绍Java中的CyclicBarrier
2022/04/13 Java/Android
Win11跳过联网界面创建本地管理账户的3种方法
2022/04/20 数码科技