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 相关文章推荐
javascript 客户端验证上传图片的大小(兼容IE和火狐)
Aug 15 Javascript
javascript jq 弹出层实例
Aug 25 Javascript
javascript动态的改变IFrame的高度实现自动伸展
Oct 12 Javascript
js获取 type=radio 值的方法
May 09 Javascript
jquery无限级联下拉菜单简单实例演示
Nov 23 Javascript
jquery动态添加文本并获取值的方法
Oct 12 Javascript
JS实现一个简单的日历
Feb 22 Javascript
Node.js常用工具之util模块
Mar 09 Javascript
Vue验证码60秒倒计时功能简单实例代码
Jun 22 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
uni-app使用countdown插件实现倒计时
Nov 01 Javascript
React更新渲染原理深入分析
Dec 24 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写的采集程序
2007/03/16 PHP
phpmyadmin出现Cannot start session without errors问题解决方法
2014/08/14 PHP
php实现的农历算法实例
2015/08/11 PHP
JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】
2019/04/16 PHP
thinkphp5框架调用其它控制器方法 实现自定义跳转界面功能示例
2019/07/03 PHP
JavaScript 读取元素的CSS信息的代码
2010/02/07 Javascript
JavaScript 判断指定字符串是否为有效数字
2010/05/11 Javascript
在VS2008中使用jQuery智能感应的方法
2010/12/30 Javascript
js获取当前路径的简单示例代码
2014/01/08 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
JS实现可关闭的对联广告效果代码
2015/09/14 Javascript
pace.js页面加载进度条插件
2015/09/29 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
2016/08/02 Javascript
JavaScript面试开发常用的知识点总结
2016/08/08 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
jquery与ajax获取特殊字符实例详解
2017/01/08 Javascript
underscore之Collections_动力节点Java学院整理
2017/07/10 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
2018/05/08 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
2018/10/29 Javascript
JavaScript中Dom操作实例详解
2019/07/08 Javascript
jQuery实现倒计时功能完整示例
2020/06/01 jQuery
react antd表格中渲染一张或多张图片的实例
2020/10/28 Javascript
[01:59][TI9趣味视频] 全明星赛奖励
2019/08/23 DOTA
使用python解析xml成对应的html示例分享
2014/04/02 Python
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
python排序方法实例分析
2015/04/30 Python
python查询sqlite数据表的方法
2015/05/08 Python
python 类详解及简单实例
2017/03/24 Python
python3.6数独问题的解决
2019/01/21 Python
几款好用的python工具库(小结)
2020/10/20 Python
Vision Directa智利眼镜网:框架眼镜、隐形眼镜和名牌太阳眼镜
2016/11/23 全球购物
Falconeri美国官网:由羊绒和羊毛制成的针织服装
2018/04/08 全球购物
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
美国花园雕像和家居装饰网上商店:Design Toscano
2019/03/09 全球购物
员工晚婚的请假条
2014/02/08 职场文书
Python激活Anaconda环境变量的详细步骤
2021/06/08 Python