位置: 编程技术 - 正文

利用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中遍历指定的对象和数组是哪个方法)

  • 二手车过户需要带什么资料
  • 可以出口的商品
  • 商誉在资产负债表中如何体现
  • 支票上的法人章和财务章是央行盖吗
  • 可抵扣农产品进项税额吗
  • 纳税申报的具体流程个体户
  • 通讯费可以个人承担吗
  • 融资租入固定资产属于资产吗
  • 股权转让后没有给转让费怎么办
  • 事业单位支付方式
  • 文化建设事业费逾期申报有罚款吗
  • 跨行发报
  • 个人独资企业也要报税吗
  • 优化技巧
  • 其他应付款报表填列
  • 受伤员工补贴
  • 契税纳税义务发生时间税屋
  • 固定资产清理会计处理例题
  • 税控盘费用抵减增值税的账务处理
  • 个税申报成功如何修改
  • 分期收款方式怎么算消费税
  • 民间非营利组织会计制度最新版
  • 银行定期存款转存
  • 预征率3%
  • 合同印花税交给谁
  • 一家公司各项费用支出
  • 退回的工伤费用怎么做账
  • 苹果电脑里的finder是什么
  • 公司年终奖怎么缴税
  • 生产型企业出口退税计算案例
  • 成本会计工作流程表
  • 中小微企业社保补贴
  • 月末结转本年利润吗
  • php微信公众号开发框架
  • Python中tkinter的 Variable类
  • 小规模所得税申报表利润总额是填季报吗
  • 对公帐户进出帐要交税吗
  • 怎样从对公账号查询账单
  • 如何用python给excel每一行添加序号
  • 多收了钱怎么记账
  • 怎么盘存货
  • 消防预付款怎么做分录
  • 收到采购发票如何录入系统
  • 企业减少注册资本
  • 营改增对金融业税负的影响
  • 无形资产如何做账务处理
  • 冲红发票如何做账务处理
  • 收到政府补助怎么感谢
  • 存货质押融资的公司有哪些
  • 住房贷款利息专项附加扣除怎么用
  • 管理费用通俗理解
  • 被征用的不动产或者动产使用后应当怎样
  • 备查账的登记主要以什么来表述
  • 在sql中执行一个创建数据表的脚本文件
  • mysql案例分析
  • dos命令环境
  • win10屏幕显示
  • 通用pe工具箱安装win7
  • linux dicom
  • windows8.1玩英雄联盟
  • win10打开或关闭功能在哪里
  • windows7升级到win8
  • javascript编程技术
  • 非常好的成语
  • unity ondestroy
  • Screen.sleepTimeout=SleepTimeOut.NeverSleep 禁止屏幕锁屏
  • Bootstrap与KnockoutJs相结合实现分页效果实例详解
  • 程序员基本入门知识
  • andengine学习,《android游戏开发实践指南》详解
  • 菜鸟学安卓逆向
  • three.js碰撞检测
  • javascriptprompt用法
  • android数据存储文件读写实验
  • js页面滚动到指定位置
  • python系统监控
  • 江西省税务局查不到缴费记录
  • 国税税控开票系统
  • 贵州税务开票系统登录
  • 境外个人税务备案登记表
  • 邳州国税局副局长
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设