用jQuery Masonry快速构建一个pinterest网站布局
【jQuery插件】用jQuery Masonry快速构建一个pinterest网站布局
http://masonry.desandro.com/
前段时间领导给我看了一个网站:http://pinterest.com/,
Pinterest 这个名字还算容易理解:「Pin」就是用图钉往墙上钉东西,「interest」就是趣味。
通过 Pinterest ,你可以:
1) 发现有趣的图片——设计、摄影、产品、新闻——并刺激灵感;
2) 将有趣的图片归类——tag、board、category、source——并分享给好友。
一打开Pinterest你会被那些漂亮的图片和网站的杂志风格所吸引。非常强的视觉冲击。
当然今天不是讨论产品的东西,Pinterest的布局非常有意思,按照列排,宽度自适应。正好知道jquery有个叫Masonry的插件,这个插件非常合适做Pinterest类似的布局,而且非常简单。我做了一个简单的类似Pinterest布局的demo,html和css是Pinterest的。
查看demo:http://www.css88.com/demo/jquery-masonery/;
jQuery Masonry插件的参数也很简单:
1 $('#wrapper').masonry({ 2 3 singleMode: false, 4 // 禁用测量每个浮动元素的宽度。 5 // 如果浮动元素具有相同的宽度,设置为true。 6 // 默认: false 7 8 columnWidth: 240, 9 // 1列网格的宽度,单位为像素(px)。10 // 默认: 第一个浮动元素外宽度。11 12 itemSelector: '.box:visible',13 // 附加选择器,用来指定哪些元素包裹的元素会重新排列。14 15 resizeable: true,16 // 绑定一个 Masonry 访问 用来 窗口 resize时布局平滑流动.17 // 默认:true18 19 animate: true,20 // 布局重排动画。21 // 默认:false22 23 animationOptions: {},24 // 一对动画选项,具体参数可以参考jquery .animate()中的options选项,见:http://www.css88.com/jqapi/#p=animate25 26 appendedContent: $('.new_content'),27 // 附加选择器元素,用来尾部追加内容。28 // 在集成infinitescroll插件的情况下使用。29 30 saveOptions: true,31 // 默认情况下,Masonry 将使用以前Masonry使用过的参数选项,所以你只需要输入一次选项32 // 默认:true33 34 }, function() {}35 // 可选择的回调函数36 // 'this'将指向重排的Masonry适用元素37 );
更多关于masonry的demo参见http://desandro.com/resources/jquery-masonry/
转载于:https://www.cnblogs.com/gdlr51/archive/2012/03/15/2397887.html
用jQuery Masonry快速构建一个pinterest网站布局相关推荐
- 【jQuery插件】用jQuery Masonry快速构建一个pinterest网站布局(转)
[jQuery插件]用jQuery Masonry快速构建一个pinterest网站布局 时间:2011年03月21日作者:愚人码头查看次数:29,744 views评论次数:25条评论 前段时间领导 ...
- 【jQuery插件】用jQuery Masonry快速构建一个pinterest网站布局
转自:http://www.css88.com/archives/3321 前段时间领导给我看了一个网站:http://pinterest.com/, Pinterest 这个名字还算容易理解:「Pi ...
- 如何使用ChatGPT快速构建一个网站模板
前端Q 我是winty,专注分享前端知识和各类前端资源,乐于分享各种有趣的事,关注我,一起做个有趣的人- 公众号 点击上方 前端Q,关注公众号 回复加群,加入前端Q技术交流群 英文 | https:/ ...
- 如何使用ChatGPT快速构建一个网站模板?
欢迎来到令人兴奋的自然语言处理和机器学习世界!今天,我们将探索 ChatGPT 的功能,它是由 OpenAI 公司开发的目前最先进的人工智能工具.当然,你也可以将其看作是一个智能机器人.ChatGPT ...
- 使用 Responsive Elements 快速构建响应式网站
Responsive Elements 可以使任何元素来适应和应对他们所占据的区域.这是一个轻量的 JavaScript 库,你可以轻松嵌入到你的项目.元素会更具自己的宽度,自动响应和适应空间的增加或 ...
- 八十九、Python的GUI系列 | 使用PyQt5 快速构建一个GUI 应用
@Author:Runsen @Date:2020/7/11 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼身心:在每天的不断重复学习中,耐住寂寞,练就真功,不畏 ...
- 深度学习笔记:01快速构建一个手写数字识别系统以及张量的概念
深度学习笔记:01快速构建一个手写数字识别系统 神经网络代码最好运行在GPU中,但是对于初学者来说运行在GPU上成本太高了,所以先运行在CPU中,就是慢一些. 一.安装keras框架 使用管理员模式打 ...
- 阅读小技能:【有效地构建自己的知识体系】三步阅读法来快速构建一个知识体系的方法:1、阅读“正统”文献2、读权威的综述文章 3、学术专著阅读(培养阅读品位)
文章目录 前言 I 快速构建一个知识体系 1.1 第一步:阅读`正统`文献(作品) 1.1.1 `基准线思维` 1.1.2 看哪些正统的学习材料? 1.2 第二步:就是读权威的综述文章 1.2.1 对 ...
- 【spring authorization server系列教程】(一)入门系列,spring authorization server简介。快速构建一个授权服务器(基于最新版本0.3.0)
系列文章目录 [spring authorization server系列教程](一)入门系列,快速构建一个授权服务器 文章目录 系列文章目录 前言 一.目前已实现的功能 二.入门,一步一步快速开始构 ...
最新文章
- perl 命令行小记
- Java泛型的实现原理
- Windows 技巧篇 - cmd的复制和粘贴功能
- python实操题_Python100道练习题,光看不练假把式,Python实操资源
- python使用MySQL数据库
- JavaScript进行UTF-8编码与解码
- Qt 如何处理密集型耗时的事情
- Laravel5.2之模型关联预加载
- canvas绘制视频封面
- 登录日志怎么实现_运维必看:日志标准化必须面对的 4 类问题
- PCIE传输速率详解、Gbps和GB的区分
- LR11安装报错:此计算机上缺少vc2005_sp1_with_atl_fix_redist,请安装所有缺少的必要组件,然后重新运行此安装。
- 5G物联网网络相关等专有名词解析-持续更新中
- 图片,表格末尾紧贴上方图片或表格添加脚注/备注
- 上传图片到淘宝接口调用展示
- C++的gets和puts
- 六种方法提升营销和文案水平的有效方法
- 想知道全国有多少人和你同名同姓吗?我教你免费查询
- su, su -, sudo
- 如何使用脚本语言将typora的内容自动同步到gitee上
热门文章
- 用计算机写试卷反思,用计算机写字优秀教学设计与反思
- Matlab基本操作函数 abs函数
- maya阿诺德渲染失败_Maya阿诺德渲染器产品渲染教程 Product Visualization with Maya and Arnold...
- 【vue】封装带有输入推荐和语法高亮的编辑器
- sai绘制木质感吉他和上色教程
- 【Python小游戏】2023兔年吉祥,祝大家辞旧迎新,前兔无量啦~兔年都在玩的这两款游戏,只有0.1%的人通关,你玩了吗?(内含福利源码)
- 计算机百科知识竞赛活动背景,大学百科知识竞赛策划书
- 微信小程序导航功能的实现
- 树莓派4B安装历程(小白)
- 在线文本比较工具及查询工具