“瀑布流布局”随着pinterest网的流行而出名,现在国内使用这种风格布局的网站也越来越多,比如说Mark之蘑菇街点点网哇哦等等。我第一次听到这个布局名称是来自于“乔花写的《瀑布流布局浅析一文”,之后在群里也时不时有同学会问有关于这种布局的使用方法。今天我老话重谈,主要向大家介绍一些相关的制作插件,以及成功的案例,希望能给大家今后的工作有所帮助。

制作瀑布流布局的优秀插件

首先简单的向大家推荐几款制作瀑布流的jQuery插件,这些插件能帮助大家轻松的实现类似于pinterest的布局效果:

1.Masonry

Masonry是一个动态的网格布局插件。每个元素水平方向都采用全float布局,但在垂直方向使用绝对定位来控制元素的位置,犹如彻墙一样,能做到见缝插针。

2.Isotope

Isotope是一款实现动态布局的精致jQuery插件,是单独的CSS无法实现的,而且他可以通过jQuery选择器来控制元素的显示与隐藏等。

3.Blockslt

BlocksIt.js是一个创建动态的网格布局的jQuery插件。它将HTML元素转换为“块”,它们的位置布局类似于网格布局的Pinterest一样。

4.Wookmark

Wookmark是一款简单的动态网格布局的jQuery插件。

5.Pinterest Clone Layout

这是一个客隆了Pinterest网站布局的jQuery,方便你快速创建一个类似于pinterest布局效果的站点

6.Flex

Flex是一个流体不对称的动画网格布局插件。它还有一个鼠标悬停时放大的功能。

上面六款都是jQuery插件,主要功能就是可以使用他们来制作大家所说的瀑布流布局,当然你要是认为他们不好,你可以自己动手写一个这样的插件,这点我相信您行的,但有很多不懂js的同学,还是可以用一用,顶个急。下面我们一起来看看哪些方网站在使用瀑布流布局。

谁在使用瀑布流布局?

下面展示的都是瀑布流布局的网站,看起来都很经典,然而看起来很熟悉,因为它们都是从Pinterest克隆出来的。否则,他们中的许多人只是简单的创造性使用动态的网格来展示他们的作品和内容。

1.Pinspire

一个经典的瀑布流布局案例,常常被人拿来客隆。

2.WoXiHuan

3.Huaban

4.Mishang

5.Trippy

6.Chill

7.Sworly

8.Veerle

9.All Womens Talk

10.GentleMint

除了这些案例之外,当然还有更优秀的,只不过我没有发现,如果大家手上还有更好的插件和案例,希望能与我们分享。谢谢大家。

2012年10月19日更新

7、Grid—A—Licious

2012年12月19日更新

8、jQuery.Shapeshift

这是一个jQuery插件,可以让你的每个项目列表进行瀑布流布局,这是一个瀑布流网格系统,还具有Responsive设计特性、具有随时拖曳、同时支持手机端的Touch事件。

2013年04月25日更新

9、Packery

Packery是一个布局方面的jQuery插件,可以实现瀑布流,拖放布局等功能。

转载:http://www.w3cplus.com/resources/create-dynamic-grid-layouts-like-pinterest.html

jQuery制作瀑布流(转)的更多相关文章

  1. jquery版瀑布流

    一个月前用jquery实现了瀑布流效果,看着当时的代码有点难过……今天抽时间稍微修改了一下.额,现在看起来不是那么难受了,就来和大家分享一下.废话不多说,开始正题~ 一.演示效果 二.html代码 & ...

  2. 网友微笑分享原创Jquery实现瀑布流特效

    首先非常感谢网友微笑的无私分享,此Jquery特效是一款非常流行和实用的瀑布流布局,核心代码只有几十行,是我见过代码量最少的瀑布流布局,非常适合网友们学习哦,希望大家好好看一下这个Jquery特效的原 ...

  3. 用jQuery实现瀑布流效果学习笔记

    jQuery一直没系统的学,只知道是js库,封装了好多js函数,方便了开发.以前做过一个原生的图片网站瀑布流效果,超级麻烦,这次用了jQuery方法,瞬间代码浓缩了,只有56行js代码.神奇的让我来把 ...

  4. 用JavaScript和jQuery实现瀑布流

    ▓▓▓▓▓▓ 大致介绍 在慕课网上学习了用原生js和jQuery实现瀑布流,在这里做个笔记 ▓▓▓▓▓▓ 用JavaScript实现 基本结构: <div id="main" ...

  5. 【前端】用jQuery实现瀑布流效果

    jQuery实现瀑布流效果 何为瀑布流: 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早 ...

  6. 用jquery实现瀑布流案例

    一.瀑布流是我们常见的案例,这里主要讲述,用jquery的方式实现瀑布流的功能! 引言:我们经常见到很多网站的瀑布流功能,如淘宝.京东这些商品等等.. 实现它我们首先考虑几个问题:1.获取到数据   ...

  7. jQuery实现瀑布流

    瀑布流布局多用于加载图片,或者图片配上文字.视觉表现为参差不齐的多栏布局.随着页面滚动条向下滚动,还会不断加载数据块并附加至当前尾部.本文就来利用jQuery实现一个图片瀑布流的效果. 1.布局. 首 ...

  8. Jquery简单瀑布流代码示例

    最近很多网站都采用瀑布流风格设计,感觉挺有个性的,比较合适做图片类型的网站,没事仿开心网做一个瀑布流示例. 需要用到Jquery,jquery.masonry.min.js <!DOCTYPE ...

  9. jQuery实现瀑布流(pc、移动通用)

    使用 jQuery 的 Masonry 插件来实现这种页面形式 1,分别下载 jQuery 与 Masonry ,然后把他们都加载到页面中使用. 加载代码: <script src=" ...

随机推荐

  1. git 简单用

    之前一直用svn,用git也只是从github上clone代码.现在自己试试用git做版本控制.等用熟悉了,再看看怎么搞分支,合并,多人开发之类的. 1下载个git客户端,如Git for Windo ...

  2. bzoj 1202: [HNOI2005]狡猾的商人 并查集好题

    1202: [HNOI2005]狡猾的商人 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 2946  Solved: 1384[Submit][Sta ...

  3. js addEventListener attachEvent

    attachEvent方法,为某一事件附加其它的处理事件.(不支持Mozilla系列) addEventListener方法 用于 Mozilla系列 举例: document.getElementB ...

  4. RTMP命令亲自测试记录

    手动和自动录像模块: recorder rec1 { record all manual; record_unique on; record_notify on; record_max_size 51 ...

  5. GooglePlay_下载apk

    关键字:"APK Downloader" 方式: (1)."APK Downloader"网站在线下载(无需我们的GooglePlay账户信息,也就无需Goog ...

  6. angularjs探秘<一>

    首先聊聊angularjs是啥. 首先AngularJS 是一个 JavaScript 框架.(PS:其实就是外部引用的js文件) 所以AngularJS的使用依然是外部引用js文件. 附上引用地址 ...

  7. js的事件处理程序

    js事件处理程序一般有三种: 1.HTML事件处理程序 <body> <input type="button" value="点击" oncl ...

  8. MyEclipse8.5启动无法选择工作空间的问题

    方法一:打开Window---Preferences---General---Startup and Shutdown,勾选Prompt for workspace on startup 选项,再次登 ...

  9. Java编程思想学习笔记_3(继承,内部类)

    一.继承与清理 如果某个类需要去清理自身的资源,那么必须用心为其创建回收垃圾的方法,而如果此类有导出的子类,那么必须在导出类中覆盖回收的方法,当覆盖被继承类的回收垃圾的方法的时候,需要注意销毁的顺序应 ...

  10. Android网络编程系列 一 TCP/IP协议族之网际层

    这篇借鉴的文章主要是用于后续文章知识点的扩散,在此特作备份和扩散学习交流. 网际层包括:IP.ICMP.IGMP 以及处在网际层实际工作在链路层的 ARP 和 RARP等等协议. 1.IP协议 互联网 ...