位置: 编程技术 - 正文

jQuery Masonry瀑布流插件使用方法详解(js瀑布流效果代码)

编辑:rootadmin

推荐整理分享jQuery Masonry瀑布流插件使用方法详解(js瀑布流效果代码),希望有所帮助,仅作参考,欢迎阅读内容。

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

用jQuery Masonry 插件创建瀑布流式的页面

我们可以使用 jQuery 的 Masonry 插件来实现这种页面形式,下面介绍一下方法。

1、分别下载 jQuery 与 Masonry ,然后把他们都加载到页面中使用。

加载代码:

解释:很简单,就是把下载之后的脚本文件嵌入到你想使用瀑布流形式的页面中,注意文件的名称与路径,根据你自己的实际情况修改。

2、页面代码

jQuery Masonry瀑布流插件使用方法详解(js瀑布流效果代码)

解释:把每个小内容块放在一个拥有相关类的容器里,然后把所有的内容块放在一个大的容器里,这里我们把内容块图片放在一个拥有 .box 类的 <div> 标签里,然后把他们又使用带有 #masonry ID 的 <div> 里面,一会儿我们会用 #masonry ID 和 .box 类来触发使用瀑布流。

3,、样式代码

解释:针对第二步的页面代码,我们需要添加一点样式,.box 类我们添加了浮动属性,还设置了他的宽度。

4、在页面中启用瀑布流形式的脚本代码

解释:这里我们首先定位想使用瀑布流的大容器是什么,这里就是带有 #masonry ID 的 <div> 标签,在 var $container = $('#masonry'); 这行代码中定义。然后我们还要说明瀑布流里的每个内容块容器上共同的类是什么,这里就是带有 .box 类的 <div> 标签,在itemSelector : '.box', 这行代码中定义。

gutter: , 这行代码定义了内容块之间的距离是 像素,isAnimated: true, 这行代码可以打开动画选项,也就是当改变窗口宽度的时候,每行显示的内容块的数量会有变化,这个变化会使用一种动画效果。

(感谢网友阿富)提供不居中显示!

我的一个笨方法:

源码下载:

EasyUI修改DateBox和DateTimeBox的默认日期格式示例 最近整理Easyui控件的时候,对Easyui的DateBox控件和DateTimeBox控件进行了梳理,而我之所以将EasyUI的DateBox控件和DateTimeBox控件放在一起,归为一类,是因为

详解jquery validate实现表单验证 (正则表达式) 一、目的为了更好地实现人机交互,使用jQuery封装库中的validate插件,在用户填写表单时,可以快速地对用户填写的数据进行验证,并做出反馈。二、val

EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法 1:首先赋值要在页面加载后才能赋值,也就是在onLoad中;2:是因为dialog里的输入域用了textbox控件,如果需要赋值,那么要调用textbox的赋值方法,而不是$('#

标签: js瀑布流效果代码

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

上一篇:JS中Array数组学习总结(js array数组)

下一篇:EasyUI修改DateBox和DateTimeBox的默认日期格式示例(easyui combobox设置值)

  • 简易计税方法是什么意思
  • 非税收入包括哪些来源
  • 纳税人证明模板
  • 纳税调整增加额在报表的哪里
  • 售后租回交易有哪几种不同的情况
  • 厂部管理人员薪酬计入什么费用
  • 预付款类发票可抵扣吗
  • 增值税包括哪些内容
  • 内账月末怎样结转
  • 小规模一季度不超过45万
  • 车船抵扣如何填报
  • 金融企业逾期贷款税前扣除
  • 企业为职工购买的商业保险属于职工薪酬吗
  • 个税手续费返还会计分录
  • 货物发出未开票不确认收入
  • 安全费用提取使用管理办法2022 136
  • 股东利润分配怎么交税
  • 物业公司收取的电费怎么确认收入
  • 发给一个人的说说
  • 影响所得税金额的因素有哪些
  • 个人所得税核定征收计算公式
  • 哪些发票可以抵扣成本
  • 青苗补偿 税
  • 土地增值税计算公式及举例
  • 合营企业之间为什么不构成关联方
  • 增值税计入应付账款
  • 跨期费用会计处理
  • 转让费入什么会计分录
  • 电脑玩游戏卡怎么弄
  • 分配水电费会计分录怎么写
  • 去实体店装win10专业版多少钱
  • 软件远程调用失败是什么意思
  • PHP:mb_detect_order()的用法_mbstring函数
  • 如何选购汽车
  • wrme.exe是什么
  • 混凝土简易计税能抵扣么
  • 生产企业 制造商
  • 项目的分包行为是否合理
  • 金税三期税收管理系统响应异常返回信息:没有查询
  • 电费打发票用哪个软件
  • 大前端需要掌握什么技能
  • python的Django框架
  • 模糊数学神经网络
  • 分公司二季度安全生产分析会内容
  • python3 sys模块
  • 无形资产入账价值错误怎么调
  • 配置英文
  • 行政事业单位赞助支出会计核算办法
  • 外贸企业增值税申报
  • 房东减免部分房租
  • 预计负债的账务处理
  • 企业退休返聘人员怎么规避风险
  • 没计提的税费怎么处理
  • 销项税和进项税的借贷方向
  • 待处理财产损溢借贷反向
  • 支票拿到银行怎么用
  • 小企业会计准则以前年度损益调整
  • ubuntu 安装指定位置
  • unix vi命令
  • 宏基笔记本一键恢复系统
  • windows定时关机计划
  • win10阻止可能不需要的应用吗
  • xp系统不能正常启动怎么修复
  • windows7命名规则
  • 苹果mac 最新系统
  • win7网页显示不全
  • win8开机进入开始界面
  • 都是惹得祸
  • httprequst向服务端发送请求错误
  • 慎用是能用还是不能用
  • javascript含义
  • Ubuntu 16.04 LTS中源码安装Python 3.6.0的方法教程
  • js 状态模式
  • python字典添加多个键值对
  • jquery教程实例
  • jquery代码实例
  • python 管理系统
  • 国家税务总局票据丢失罚款标准
  • 安徽增值税普通发票税率1%
  • 湖北税务发票查询系统网
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设