位置: 编程技术 - 正文

利用jquery实现瀑布流3种案例(jquery瀑布流代码)

编辑:rootadmin

推荐整理分享利用jquery实现瀑布流3种案例(jquery瀑布流代码),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery示例,jquery瀑布流代码,jquery瀑布流,使用jquery,jquery ul li,jquery ul li,使用jquery,jquery瀑布流代码,内容如对您有帮助,希望把文章链接给更多的朋友!

一、瀑布流是我们常见的案例,这里主要讲述,用jquery的方式实现瀑布流的功能!

引言:我们经常见到很多网站的瀑布流功能,如淘宝、京东这些商品等等..

实现它我们首先考虑几个问题:1、获取到数据 2、排列的方式 3、如何实现排列

其实,在瀑布流里有个核心的功能就是用到了绝对定位

我们逐步深入分析:

这是html的布局,css布局可以自己设置,只要保证grid盒子有绝对定位,其父元素有相对定位即可!后面有参考代码

下面是script部分

这种方式,可以通过for循环按照顺序获取图片的索引值,然后不断的更改其css样式中的top值和left值!

在我们获取图片的资源时,有的时候图片的高度是不一致的,如果一直按照顺序排列,最后的图片显示,排列不整齐,就会效果不佳!

继续往下看:

我们可以通过另一种方法,来实现图片插入当前列最短的一列,可以解决这个问题!

下面我们来主要看一下jquery的代码:

好了,现在我们已经通过两种方式解决了瀑布流这个问题,但是我们还有个问题没有解决,那就是做瀑布流很大的原因是因为图片的量比较大,我们一个一个写html是不是有点太low了!

继续往下看:

下面介绍一种利用引擎模板来获取json后台的数据的方式,实现这个问题!

利用jquery实现瀑布流3种案例(jquery瀑布流代码)

1、我们只需要搭建一个html盒子即可!

2、盒子搭建好了,数据要获取啊,就靠它!

3、这是两个js库,在网上可下载到!

4、下面是具体的js部分,需要仔细分析了!

主要包括,调用搜索引擎模板里获取到的内容,绑定函数,转换成jquery对象!

这一部分主要包括:通过ajax向json请求数据

这一部分主要包括:遍历函数,进行寻找最短的列排列格子!

还有这一些,也是第四部分:

最后一步是:滚动的函数,这一部分建议使用console.log在后台验证一下,更容易理解!

虽然最后一种办法麻烦,但是这一次完成,我们就可以使用很多次,并且自动获取很多数据!

下面给大家附上原码,大家好好测试一下,不要忘记更改图片和路径哦!

第一种方法原码:

第二种方法原码:

第三种方法原码:

标签: jquery瀑布流代码

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

上一篇:JQuery遍历元素的父辈和祖先的方法(jquery遍历表单元素)

下一篇:JQuery遍历元素的后代和同胞实现方法(jquery中遍历指定的对象和数组是哪个方法)

  • 小规模升级为一般人后之前取得的增值税专用发票抵扣
  • 什么是价税分离的原因
  • 契税完税凭证是不是契税发票
  • 生产经营个人所得税退税流程
  • 企业所得税免税项目
  • 增值税申报失败怎么撤销
  • 金税盘技术维护费账务处理
  • 采购设备包含安装费用吗
  • 暂存款属于什么费用
  • 可抵扣的固定资产
  • 养殖业土地使用税减免
  • 房地产分期开发的标准
  • 企业收到的政府补贴,怎么入账
  • 收到外币计算税款的汇率是怎么算的?
  • 营改增之后还有营业税吗
  • 固定资产评估增值递延所得税
  • 消防改造费用
  • 工程竣工结算审查期限
  • 仲裁委判决还能上诉吗
  • 初级备考计划表
  • 投资利税率计算器在线计算
  • 应收账款账面价值小于计税基础
  • win7系统我的电脑图标不见了
  • tkinter美观界面
  • 进程间死锁
  • 曼哈顿2021
  • 个别报表内部交易
  • 财务管理集权与分权
  • 小企业会计准则调整以前年度费用分录
  • thinkphp6 数据库
  • 暂估原材料的数量怎么算
  • 亏损企业所得税怎么交
  • php删除数据
  • upf命令
  • 补提企业所得税财务报表应该如何调整
  • 发票入账怎么做分录
  • 织梦配置文件
  • python elasticsearch timeout
  • 计提坏账准备方法变更属于会计估计变更吗
  • 小规模纳税人免税额度是多少
  • 产品成本计算的分类法适用于( )
  • 银行存款产生的利息收入
  • 其他应付款辅助是供应商还是客户
  • 商业汇票的承兑银行必须具备下列条件
  • 光伏发电计费问题
  • 对方公司已注销还能起诉吗
  • 会计学中递延收益的概念
  • 查账征收个体户经营所得税怎么计算
  • 预付账款属于资产类科目
  • 股东不能参与公司运营和决策,可以起诉吗
  • 为什么要计提工资
  • 汽车折旧计算方法2023折旧率
  • windows下启动mysql的命令是什么
  • ubuntu中如何设置克隆屏
  • linux ubuntu安装教程
  • 关于操作系统的叙述中
  • cygwin在Windows8.1中设置ssh无密码登录
  • logrotate syslog
  • linux系统怎样安装
  • linux常见服务
  • win8.1系统升级
  • 在Linux系统中如果想移出已安装的软件
  • 轨迹球怎么调出来
  • nginx react
  • nodejs客户端框架
  • node.js基本语法
  • unity3d碰撞体
  • vue远程调用组件
  • shell脚本的实现
  • 开源项目怎么做
  • django admin form
  • android怎么学
  • android 轮播
  • Android系统服务
  • 浙江省工会经费减免最新政策2019年
  • 北京国税办税服务厅
  • 新吉高铁开工典礼
  • 广西纳税申报流程
  • 城建税教育费附加怎么做分录
  • 准生证网上查询码是个什么
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设