位置: 编程技术 - 正文

纯js实现瀑布流布局及ajax动态新增数据(vue 瀑布流)

编辑:rootadmin

推荐整理分享纯js实现瀑布流布局及ajax动态新增数据(vue 瀑布流),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:前端实现瀑布流,js实现瀑布流效果,js实现瀑布流效果,css瀑布流效果代码,html 瀑布流,js实现瀑布流效果,html 瀑布流,jquery瀑布流代码,内容如对您有帮助,希望把文章链接给更多的朋友!

本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能。

缺点:

1. 程序不是响应式,不能实时调整页面宽度;

2. 程序中当新增ajax模拟数据图片后,是将整个页面的所有图片都重新定位一次。

3. 程序是等所有图片加载完成后再读取图片的尺寸,实际中肯定不能这样做。

4. 实际项目中,应该由后台程序给出图片尺寸值,在js代码中直接使用图片的width属性。

本程序思路:

html结构:

一、初始化布局

1. 设置#container为position:relative;

2. 设置.box为float:left;

3. 网页加载后对所有图片进行定位;

  3.1 图片宽度是固定的,计算出当前页面每行能容纳的图片数num,并得出#container的宽度,然后设置页面居中;

  3.2 循环遍历所有图片,前num个图片默认float布局作为第一行,并存入数组BoxHeightArr = [];

  3.3 第一行布局完成后,排布下一个图片,并更新BoxHeightArr[]:

纯js实现瀑布流布局及ajax动态新增数据(vue 瀑布流)

    3.3.1 将下一个图片放到第一行最矮图片的下方(用position:absolute定位),也就是BoxHeightArr[]中高度最小的那一列,记录下列数的索引值:minIndex;

    3.3.2 更新BoxHeightArr[]中最小的那个值(BoxHeightArr[minIndex]+当前图片的高度);

  3.4 重复循环3.3步骤,直到所有图片都排布完成

二、实时监测滚动高度,是否要加载新数据

1.初始化完成后得到最后一个图片距离顶部的高度: lastContentHeight

2.用window.onscroll = function(){...}

  实时监测当前页面的滚动高度为:scrollTop

  实时监测当前页面视窗高度为:pageHeight

3. 当页面监测到:lastContentHeight < scrollTop + pageHeight 时,用ajax获取新增图片的json数据。

三、页面底部新增内容

1. 用一个循环,先创建一个新的图片容器,添加到底部,然后将json数据中相应的图片数据如路径等信息写入该容器完成添加图片。

2. 所有新增图片添加完成后,对整个页面的所有图片及布局重新执行步骤一的初始化操作。

项目文件夹:

index.html: 预先置入部分图片数据

style.css:

app.js:

效果图:

标签: vue 瀑布流

本文链接地址:https://www.jiuchutong.com/biancheng/373415.html 转载请保留说明!

上一篇:原生JavaScript实现Ajax的方法(原生javascript开发)

下一篇:JS实现的网页上的颜色拾色器(js怎么做网页)

  • 虚开增值税如何获利
  • 所得税税负率是125正常吗
  • 车辆使用费属于什么税收分类
  • 租赁收入缴纳个人所得税
  • 冲回多提的坏账准备分录为
  • 基本户如果没有资金往来
  • 应收利息增加会计分录
  • 交社保不发工资怎么办
  • 房产经纪公司成本费用
  • 发票分开开票
  • 牛奶公司饲养奶牛生产牛奶
  • 在建工程有应交税费吗
  • 应收债权属于非抵押吗
  • 工程暂估价超了怎么办
  • 购进货物用于免征增值税项目
  • 个人投资收益要交所得税吗
  • 代开专票地税附加税申报办法
  • 增值税的税负率的计算公式
  • 所有转让土地税怎么算
  • 个人投资者
  • 行政单位代管资金怎么做账
  • 投资利税率计算器在线计算
  • 个税是应发工资扣,还是实发工资扣
  • 税控盘登不上怎么回事
  • 进口增值税发票怎么认证
  • 当年的成本发票必须当年结算吗
  • win7音频服务未运行怎么办
  • PHP:oci_new_collection()的用法_Oracle函数
  • 远期结汇账务处理办法
  • 现金盘盈后的财务分析
  • 结转代销成本
  • 投资性房地产转为存货
  • vue如何销毁页面
  • 借银行存款贷预收账款
  • java基础面试题选择题
  • 微信小程序在哪里打开
  • php ffi
  • 对供应商的罚款通知怎么写
  • 电信收款收据可以入账吗
  • 商业承兑汇票在网银上怎么查询
  • 混合销售行为的例子
  • 哪些发票必须备注
  • sql中的row_number
  • 营业收入的构成分析主要包括
  • 企业所得税期初余额什么意思
  • 购买其他权益工具投资时发生的交易费用
  • 咨询服务业优惠政策
  • 商品流通环节包括
  • 广告类的公司
  • 小规模纳税人计税销售额为不含税销售额
  • 周转材料怎么做分录
  • 处置存货损失应该放哪个科目
  • 加计抵减期末有余额怎么办
  • 如何理解什么是半殖民地半封建社会
  • 企业汇算清缴需要提供什么资料
  • 企业印花税率
  • 如何填报自然人缴税系统
  • 待转销项税额对应科目
  • 如何对企业进行有效的控制
  • 库存退货怎么做账
  • 盈余公积必须提折旧吗
  • T-SQL中使用正则表达式函数
  • windows10创意者更新
  • windowsserver2008r2密码重置
  • Mac OS X 10.9 Mavericks系统怎么激活?
  • linux的用户
  • freebsd使用
  • xp设置程序开机启动
  • win7系统打开服务
  • win8飞行模式在哪
  • win8点设置没反应
  • nodejs做接口
  • ghost详细说明
  • 探索世界怎么玩
  • python整理表格不用入门
  • angular 图片懒加载
  • jquery瀑布流
  • Unity64 AStarPath 寻路失效 Bug解决 IOS64 IL2CPP - Bad date/time format in the zip file
  • 建行信用卡怎么提额
  • 水利基金按什么计提
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设