1、分别加载jquery插件jquery.masonry插件两个文件

下载jquery插件:http://jquery.com
也可以引用google的cdn外部jquery核心库JS文件
下载jquery.masonry插件:http://masonry.desandro.com/
加载代码:

1 <script src="js/jquery-1.8.1.min.js"></script>
2 <script src="js/jquery.masonry.min.js"></script>

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

2、瀑布流布局样式代码

01 .container-fluid {
02   padding20px;
03 }
04 .box {
05   margin-bottom20px;
06   floatleft;
07   width220px;
08 }
09 .box img {
10   max-width100%
11 }

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

3、页面瀑布流布局html代码

1 <div id="masonry" class="container-fluid">
2   <div class="box"><img src="images/1.jpg"></div>
3   <div class="box"><img src="images/2.jpg"></div>
4   <div class="box"><img src="images/3.jpg"></div>
5   <div class="box"><img src="images/4.jpg"></div>
6   <div class="box"><img src="images/5.jpg"></div>
7 </div>

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

4、初始化瀑布流插件的jquery脚本代码

01 $(function(){
02     var $container = $('#masonry');
03     $container.imagesLoaded( function(){
04         $container.masonry({
05             itemSelector : '.box',
06             gutterWidth : 20,
07             isAnimated: true,
08         });
09     });
10 });

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

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

相关案例演示和下载:#

jquery.masonry瀑布流插件的4个使用步骤的更多相关文章

  1. 自定义基于jquery竖向瀑布流插件

    公司新项目做了一个关于图片的板块,网上找了一些瀑布流插件都不是很适合自己,于是就自己造轮子写一个,并封装成插件github 于是就想分享一下,主要是为了更好的学习与记忆. 如果大家进来了,希望能给我g ...

  2. jQuery动态网格瀑布流插件Masonry

    Masonry是一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发瀑布流界面效果.和CSS中float的效果不太一样的地方在于,float先水平排列,然后再垂直排列,使用Masonr ...

  3. 瀑布流插件|jquery.masonry|使用demo

    Maonsry+Infinite-Scroll实现滚动式分页,网上有很多,这里只说: 瀑布流插件的一个基本使用,附上基本功能的demo <html> <head> <me ...

  4. jQuery瀑布流插件masonry

    项目要做荣誉证书的排版,宽度是统一的,但是高度不一致 采用瀑布流的效果来实现 默认先实现前15张,点击按钮再加载全部剩下的数据 效果图 首先是html部分,写好样式 <!-- 荣誉资质 --&g ...

  5. 8款实用的Jquery瀑布流插件

    1.网友Null分享Jquery响应式瀑布流布局插件 首先非常感谢网友Null的无私分享,此作品是一款响应式瀑布流布局Jquery插件,网友Null增加了一个屏幕自适应和响应式,响应式就是支持智能手机 ...

  6. jQuery插件之-瀑布流插件

    jquery.wookmark.js 一个实现瀑布流自适应宽度布局的jQuery插件—jquery.wookmark.js , wookmark使用非常简单到只需要一句代码就能实现,除此之外,当页面宽 ...

  7. 利用jQuery来扩展一个瀑布流插件

      简单了解jQuery.fn.extend() jQuery.fn.extend()函数用于为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法). (截图来自jQuery文档) 为了更清晰 ...

  8. 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件

    一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...

  9. 基于jQuery封装一个瀑布流插件

    /*封装一个瀑布流插件*/ (function($){ $.fn.WaterFall = function(){ /*这是你初始化 调用这个方法的时候的 那个jquery选着到的dom对象 this* ...

随机推荐

  1. 学习笔记:AC自动机

    话说AC自动机有什么用......我想要自动AC机 AC自动机简介:  首先简要介绍一下AC自动机:Aho-Corasick automation,该算法在1975年产生于贝尔实验室,是著名的多模匹配 ...

  2. String类对象的比较

    1.字符串比较,是按照字符串(String)中每一个字符(char)的字段表顺序进行比较 /** * Compares two strings lexicographically(字典序,按照字典顺序 ...

  3. [Usaco2006 Nov]Roadblocks第二短路

    贝茜把家搬到了一个小农场,但她常常回到FJ的农场去拜访她的朋友.贝茜很喜欢路边的风景,不想那么快地结束她的旅途,于是她每次回农场,都会选择第二短的路径,而不象我们所习惯的那样,选择最短路. 贝茜所在的 ...

  4. 开发winform程序,在拖拽控件大小时,VS会卡死

    你可以看看你最近有没有装什么新的软件,比如说:有道词典就会与VS有冲突,导致卡死,可以把进程关闭.

  5. nginx配置解决vue单页面打包文件大,首次加载慢的问题

    cnpm run build 文件过大,其中主要是vender.js有1.5M,代码部署到服务器,首次访问加载页面时比较慢,耗时6.5s左右,所以需要优化下. 1.Nginx开启gzip 找到ngin ...

  6. Back Track 5 之 网络踩点(二)

    操作系统探测 Xprobe2 通过ICMP协议来获得指纹,通过模糊矩阵统计分析主动探测数据包对应的ICMP数据特征,进而探测得到远端操作系统的类型. 格式: ./xprobe2 域名 ./xprobe ...

  7. Linq-分页查询

    var list = from s in db.t_address select s; & userid != null) { list = list.Where(v => v.user ...

  8. Linux系统多网卡绑定实战

    导读 对于服务器来说,网络设备的稳定也是比较重要的,特别是网卡.在生产型的系统中,网卡的可靠性就更为重要了. 多块网卡绑定到一个IP地址,当一块网卡发生物理性损坏的情况下,另一块网卡自动启用,并提供正 ...

  9. idea 本地调用zookeeper配置

  10. [Functional Programming] mapReduce over Async operations with first success prediction (fromNode, alt, mapReduce, maybeToAsync)

    Let's say we are going to read some files, return the first file which pass the prediction method, t ...