【jQuery插件】用jQuery Masonry快速构建一个pinterest网站布局
转自:http://www.css88.com/archives/3321
前段时间领导给我看了一个网站: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插件的参数也很简单:
$('#wrapper').masonry({ singleMode: false, // 禁用测量每个浮动元素的宽度。 // 如果浮动元素具有相同的宽度,设置为true。 // 默认: false columnWidth: 240, // 1列网格的宽度,单位为像素(px)。 // 默认: 第一个浮动元素外宽度。 itemSelector: '.box:visible', // 附加选择器,用来指定哪些元素包裹的元素会重新排列。 resizeable: true, // 绑定一个 Masonry 访问 用来 窗口 resize时布局平滑流动. // 默认:true animate: true, // 布局重排动画。 // 默认:false animationOptions: {}, // 一对动画选项,具体参数可以参考jquery .animate()中的options选项,见:http://www.css88.com/jqapi/#p=animate appendedContent: $('.new_content'), // 附加选择器元素,用来尾部追加内容。 // 在集成infinitescroll插件的情况下使用。 saveOptions: true, // 默认情况下,Masonry 将使用以前Masonry使用过的参数选项,所以你只需要输入一次选项 // 默认:true }, function() {} // 可选择的回调函数 // 'this'将指向重排的Masonry适用元素 );
更多关于masonry的demo参见http://desandro.com/resources/jquery-masonry/
【jQuery插件】用jQuery Masonry快速构建一个pinterest网站布局相关推荐
- 【jQuery插件】用jQuery Masonry快速构建一个pinterest网站布局(转)
[jQuery插件]用jQuery Masonry快速构建一个pinterest网站布局 时间:2011年03月21日作者:愚人码头查看次数:29,744 views评论次数:25条评论 前段时间领导 ...
- 用jQuery Masonry快速构建一个pinterest网站布局
用jQuery Masonry快速构建一个pinterest网站布局 [jQuery插件]用jQuery Masonry快速构建一个pinterest网站布局 http://masonry.desan ...
- 开发一款自动指向特定页面元素的jQuery插件:jQuery PointPoint
来源:tutorialzine.com 编译:GBin1.com web设计人员感觉目前他们出于一个两难的境地:他们需要创建出优美的用户界面,需要创新并且实用.有时候,尽管我们全力付 ...
- jquery插件 (jquery之家)的使用案列,(瀑布流的使用)非常简单
在我们使用这个插件的时候,我们只需要打开这个网址 ,非常优秀的一个jquery插件库jQuery库_jQuery之家-自由分享jQuery.html5.css3的插件库 使用这个插件库 1.先引入js ...
- 八十九、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 对 ...
- 如何使用ChatGPT快速构建一个网站模板
前端Q 我是winty,专注分享前端知识和各类前端资源,乐于分享各种有趣的事,关注我,一起做个有趣的人- 公众号 点击上方 前端Q,关注公众号 回复加群,加入前端Q技术交流群 英文 | https:/ ...
- 【spring authorization server系列教程】(一)入门系列,spring authorization server简介。快速构建一个授权服务器(基于最新版本0.3.0)
系列文章目录 [spring authorization server系列教程](一)入门系列,快速构建一个授权服务器 文章目录 系列文章目录 前言 一.目前已实现的功能 二.入门,一步一步快速开始构 ...
最新文章
- layui进度条bug
- 如何更改 Mac 上的光标颜色
- 从另一个角度理解分布式系统与CAP定理
- Python全栈开发之并发编程
- 运行adb devices命令后 显示 List of devices attached 无法获取设备解决方法
- C ++ 的 背 影 ——C++之父Bjarne Stroustrup印象 左轻侯 2002.11.4
- 维也纳新生生活指南(2018春季版)
- 计算机i网络管理员证书四级,软考网络管理员试题练习(4)
- matlab 更换坐标轴_matlab导入数据生成曲线,并更改坐标轴刻度
- XTDRONE:ego_planner三维运动规划
- 探真无阻塞加载javascript脚本技术
- android 显示大屏幕_android android如何将优化的体验带到大屏幕
- 钉钉 服务器 消息推送,【20210727 更新】 全能推送PushBot(原钉钉推送)支持企业微信,PushPlus,Bark...
- 用HTML搭建3D立体相册网页,可放大缩小
- ppt文字提取转word
- [xiaoyi和你飞]博弈基础 ——[AB]
- MBA-day33 绝对值的几何意义
- Python-docx:读写word文档的Python库
- 4K电视近在咫尺?你离真正的4K电视或许还有一段距离
- CSS选择器之:first-child,:last-child
热门文章
- CK+人脸表情数据库地址
- 网络与信息安全领域泰斗
- 红米android 升级包下载地址,红米手机2 MIUI9.0+Android7.1刷机包
- CC2640R2F学习笔记(6)——UART串口使用
- 算法训练 - 调和数列问题 输入一个实数x,求最小的n使得,1/2+1/3+1/4+...+1/(n+1)>=x。 输入的实数x保证大于等于0.01,小于等于5.20,并且恰好有两位小数。你的
- 如何实现excel与matlab的数据交互 / 如何在Excel中设置MATLAB的加载宏 / 如何实现Excel与MATLAB的连接
- 2022年全球市场网络加速软件总体规模、主要企业、主要地区、产品和应用细分研究报告
- 22 行 JS 黑掉英国航空,38 万乘客受害;公有云被频繁用于 DDoS 攻击
- 计算机组装与维护学生情况分析,《计算机组装与维护》之机箱和电源的说课稿...
- 从0到1实现单机记账APP原理与细节uniApp内含源码 (一)