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 相关文章推荐
jquery 子窗口操作父窗口的代码
Sep 21 Javascript
24款非常有用的 jQuery 插件分享
Apr 06 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
Nov 08 Javascript
jQuery通过扩展实现抖动效果的方法
Mar 11 Javascript
基于javascript实现tab切换特效
Mar 29 Javascript
浅析Javascript的自动分号插入(ASI)机制
Sep 29 Javascript
用node和express连接mysql实现登录注册的实现代码
Jul 05 Javascript
微信小程序-滚动消息通知的实例代码
Aug 03 Javascript
JavaScript设计模式之构造函数模式实例教程
Jul 02 Javascript
详解JS取出两个数组中的不同或相同元素
Mar 20 Javascript
ES6小技巧之代替lodash
Jun 07 Javascript
js实现提交前对列表数据的增删改查
Jan 16 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中使用DOM类读取XML文件的实现代码
2011/12/14 PHP
PHP工程师VIM配置分享
2015/12/15 PHP
php metaphone()函数及php localeconv() 函数实例解析
2016/05/15 PHP
深入讲解PHP的对象注入(Object Injection)
2017/03/01 PHP
PHP htmlspecialchars() 函数实例代码及用法大全
2018/09/18 PHP
Jquery Uploadify上传带进度条的简单实例
2014/02/12 Javascript
JS获取网页属性包括宽、高等等
2014/04/03 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
2015/11/24 Javascript
关于数据与后端进行交流匹配(点亮星星)
2016/08/03 Javascript
js判断所有表单项不为空则提交表单的实现方法
2016/09/09 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
2016/09/19 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
2019/05/12 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
JS写滑稽笑脸运动效果
2020/05/28 Javascript
Nuxt配置Element-UI按需引入的操作方法
2020/07/06 Javascript
python字符串连接方法分析
2016/04/12 Python
由浅入深讲解python中的yield与generator
2017/04/05 Python
python实现通过flask和前端进行数据收发
2019/08/22 Python
Python collections中的双向队列deque简单介绍详解
2019/11/04 Python
使用IDLE的Python shell窗口实例详解
2019/11/19 Python
Python面向对象封装操作案例详解 II
2020/01/02 Python
使用Python项目生成所有依赖包的清单方式
2020/07/13 Python
Python学习工具jupyter notebook安装及用法解析
2020/10/23 Python
写出一个方法实现冒泡排序
2016/07/08 面试题
实用求职信范文分享
2013/12/25 职场文书
财务总监管理岗位职责
2014/03/08 职场文书
自我鉴定总结
2014/03/24 职场文书
工程质量保证书
2015/05/09 职场文书
教师培训简讯
2015/07/20 职场文书
关爱留守儿童主题班会
2015/08/13 职场文书
高中语文教材(文学文化常识大全一)
2019/08/13 职场文书
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS
Linux下使用C语言代码搭建一个简单的HTTP服务器
2022/04/13 Servers