位置: 编程技术 - 正文

纯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怎么做网页)

  • 坏账准备要写到明细账里面吗
  • 房地产企业税收优惠政策
  • 消费税的计算方法有哪三种
  • 我国的税种有哪些种类
  • 建筑业无票支出
  • 接受资不抵债并账会计分录
  • 股权转让1元转让
  • 金税盘维护费申报
  • 非同一控制下用什么法
  • 公益性捐赠会计分录金额
  • 商业收入会计分录
  • 转让股权取得的收益是调增还是调减
  • 自己做的房子可以办房产证吗
  • 上月税没报,可以开发票吗
  • 增值税预征率记忆口诀
  • 所有利息收入都免税吗
  • 营业执照办下来多久能在网上查到
  • 缴纳车船税的车辆
  • 股东净利润是什么
  • 资本化利息金额
  • 苹果手机上显示LTE是什么意思
  • 微软输入法突然变成繁体字怎么改回来
  • 工信部推出一键解绑怎么用
  • 如何在Excel中合并计算
  • 开机进入睡眠模式按哪个键解除
  • 没有劳动合同不给工资怎么办
  • phpemail正则
  • php日期差
  • bboy.exe进程是病毒吗 bboy进程安全吗
  • 工行对公贷款利息扣款时间是几点
  • 预缴企业所得税怎么做账务处理
  • 企业研发费用的归集
  • uniapp按钮
  • php面向对象和面向过程
  • php zend原理
  • phpcurl模拟登录
  • 大型语言模型的教育应用
  • 职工教育经费能结转几年
  • 无法报销的原因
  • 公司法关于公司变更后权利义务的规定
  • 运输发票计算抵扣怎么报税
  • 工会组织机构需要备案吗
  • 人力资源公司代办
  • powerdesigner12.5使用教程
  • mongodb 数据文件
  • 融资租赁的固定资产
  • 利润表中的本期金额和本年累计金额
  • 印花税是根据销售收入申报吗
  • 酒店营业成本预算
  • 个人所得税的征收模式为()A
  • 困难企业社保费返还
  • 上年度固定资产费用化了,财报怎么算
  • 增值税减免税款计入什么科目
  • 坏账准备计提的方法和比例
  • 原材料可以不设明细吗?
  • 缴纳工会经费如何记账
  • 盈余公积和未分配利润合起来构成
  • mysql建索引有哪些策略和原则
  • 如何设置sql server
  • Windows(x86,64bit)升级MySQL 5.7.17免安装版的详细教程
  • cvi linux
  • solaris 安装
  • centos8指令
  • vc精华氧化变黄
  • linux iocp
  • win10系统激活后怎么关闭
  • javascript简单
  • 3行程序搞定SVM分类-用JAVA程序调用LibSVM API 最简单的示例
  • linux服务器安全攻防
  • 在全盘搜索以win
  • node.js java 性能
  • 创业要看的书
  • jquery获取值的几种方法
  • android:padding="10dp"
  • 实现非常简单的英文
  • 浙江国税咨询电话12306
  • 工商局税务局合并了吗
  • 海关进口增值税怎么认证抵扣
  • 医疗机构执业许可证办理的条件
  • 金融商品转让是什么意思
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设