jQuery Masonry瀑布流插件使用详解

Masonry是 一款非常强大的jQuery动态网格布局插件，可以帮助开发人员快速开发类似剪贴画的界面效果。和CSS中float的效果不太一样的地方在 于，float先水平排列，然后再垂直排列，使用Masonry则垂直排列元素，然后将下一个元素放置到网格中的下一个开发区域。这种效果可以最小化处理 不同高度的元素在垂直方向的间隙。如下：

在上图中大家可以看到，在网格布局中使用float来处理不同高度的元素会使得垂直方向的元素间间隔比较大，而使用Masonry处理后，间隔变小。

用法

首先倒入类库，如下：

代码如下:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">  
</script><script src="/path/to/jquery.masonry.min.js"></script>

然后，针对元素容器执行masonry，如下：

代码如下:

$(function(){   
  $('#container').masonry({   
    // options   
    itemSelector : '.item',   
    columnWidth : 240   
  });   
});

html代码

代码如下:

<div id="container">   
  <div class="item">...</div>   
  <div class="item">...</div>   
  <div class="item">...</div>   
  ...   
</div>

css

代码如下:

.item {   
  width: 220px;   
  margin: 10px;   
  float: left;   
}

如果你加载的元素中有图片的话，那么需要确保Masonry在所有图片都加载完后才执行，需要调用如下代码：

代码如下:

var $container = $('#container');   
$container.imagesLoaded(function(){   
  $container.masonry({   
    itemSelector : '.item',   
    columnWidth : 240

赞 (0)

相关推荐

  • jQuery Masonry瀑布流插件使用方法详解

    jQuery Masonry瀑布流插件使用方法详解

    用jQuery Masonry 插件创建瀑布流式的页面 我们可以使用 jQuery 的 Masonry 插件来实现这种页面形式,下面介绍一下方法. 1.分别下载 jQuery 与 Masonry ,然后把他们都加载到页面中使用. 加载代码: <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script> <script src="http://jq22.qiniud

  • jquery.masonry瀑布流效果

    一.分别加载jquery插件与jquery.masonry插件 <script src="js/jquery-1.8.1.min.js"></script> <script src="js/jquery.masonry.min.js"></script> 二.瀑布流局部样式代码 .container-fluid { padding: 20px; } .box { margin-bottom: 20px; float:

  • jQuery Masonry瀑布流布局神器使用详解

    jQuery Masonry瀑布流布局神器使用详解

    最近在做个网站时,其中有一部分涉及到很多图片布局,想采用比较流行的Water Flow布局. 开始的时候自己动手写的,真费事情,没有考虑检测图片大小,虽然也能达到布局效果,但是图片有的本身尺寸比较小却被强行拉大了,看起来很不和谐.后来上网收了一下,原来有很好的Water Flow布局工具使用.下面来认识一下这个神器吧~ 神器名称:JQuery Masonry , 网址:http://masonry.desandro.com/index.html 使用方法相当简单: 1.标记需要布局的容器和Ite

  • jQuery.lazyload+masonry改良图片瀑布流代码

    实现方法如下:(这里只发jquery了,相关html代码请各位自己脑补一下吧,我就不发了,哈哈) /** * 自动刷新 * @type {*|jQuery|HTMLElement} */ var $container = $('#main'); $container.imagesLoaded( function(){ $container.masonry({ itemSelector : '.item', columnWidth:205, gutterWidth:10, isAnimated:

  • jQuery Masonry瀑布流插件使用详解

    jQuery Masonry瀑布流插件使用详解

    Masonry是 一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发类似剪贴画的界面效果.和CSS中float的效果不太一样的地方在 于,float先水平排列,然后再垂直排列,使用Masonry则垂直排列元素,然后将下一个元素放置到网格中的下一个开发区域.这种效果可以最小化处理 不同高度的元素在垂直方向的间隙.如下: 在上图中大家可以看到,在网格布局中使用float来处理不同高度的元素会使得垂直方向的元素间间隔比较大,而使用Masonry处理后,间隔变小. 用法 首先倒入类库,

  • Jquery uploadify上传插件使用详解

    Jquery uploadify上传插件使用详解

    Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示或下载. 首先按下面的步骤来实现一个简单的上传功能. 1 创建Web项目,命名为JQueryUploadDemo,从官网上下载最新的版本解压后添加到项目中. 2 在项目中添加UploadHandler.ashx文件用来处理文件的上传. 3 在项目中添加UploadFile文件夹,用来存放上传的文件.

  • JQuery页面地址处理插件jqURL详解

    有时我们需要在客户端处理页面地址传递的参数,jqURL插件可以实现获取页面参数及参数值,获取页面URL地址,新开一个指定大小的窗口. 使用方法介绍: 假设当前url地址为:"http://www.jb51.net?a=1&b=2&c=3" 方法1:新开一个页面窗口 复制代码 代码如下: $.jqURL.loc("http://www.jb51.net",{w:200,h:200,wintype:"_blank"}); 将会新开一个

  • 利用jQuery异步上传文件的插件用法详解

    现在想实现用ajax来上传文件的功能,但是却发现Jquery自带的ajax方法只能上传文件名,而不能上传文件:用form提交虽然能够上传文件,但是却要刷新页面...多方查找下找到了一个可用的jQuery插件,刚好可以满足异步上传文件的要求. 代码 jquery.form.js 用法 这个插件是基于表单提交的,我们只要正常的写一段提交文件的表单,如: <form id="myForm" action="comment.php" method="post

  • jQuery File Upload文件上传插件使用详解

    jQuery File Upload 是一个Jquery文件上传组件,支持多文件上传.取消.删除,上传前缩略图预览.列表显示图片大小,支持上传进度条显示:支持各种动态语言开发的服务器端. 官网链接:https://github.com/blueimp/jQuery-File-Upload/wiki 特点:拖放支持:上传进度条:图像预览:可定制和可扩展的:兼容任何服务器端应用平台(PHP, Python, Ruby on Rails, Java, Node.js, Go etc.). 使用方法:

  • 前端必备插件之纯原生JS的瀑布流插件Macy.js

    这是一款非常轻量级的纯原生JS的瀑布流插件--Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户. 这款流布局JS插件仅有4KB的大小,可以说是非常轻量级的哦.配置也比较方便,用户可以自定义间距.列数,还有个特色就是可以定义不同屏幕分辨率,不同列数,这个应用在响应式网页设计是非常方便的. 所以,选择一款简单易用的瀑布流js插件,可以让前端工程师快速开发出漂亮的瀑布流Pc网站和react 后台项目. 瀑布流布局代表网站就是 花瓣网,设计师一定不会陌生的设计网站. 插

  • 基于Bootstrap3表格插件和分页插件实例详解

    基于Bootstrap3表格插件和分页插件实例详解

    首先看下实现效果图,如果觉得还不错,请参考实现代码. 上面数据 下面分页 使用方法 1 导入bootstrap的css <link rel="stylesheet" href="css/v3/bootstrap.min.css"> 2 导入jquery <script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>

随机推荐