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

最近在做个网站时，其中有一部分涉及到很多图片布局，想采用比较流行的Water Flow布局。

开始的时候自己动手写的，真费事情，没有考虑检测图片大小，虽然也能达到布局效果，但是图片有的本身尺寸比较小却被强行拉大了，看起来很不和谐。后来上网收了一下，原来有很好的Water Flow布局工具使用。下面来认识一下这个神器吧~
神器名称：JQuery Masonry , 网址：http://masonry.desandro.com/index.html

使用方法相当简单：

1、标记需要布局的容器和Item

Masonry需要一个容器来装载结构类似的子元素

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

然后在页面中添加Jquery和Masonry脚本引用，要求jquery版本在1.6+

<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>

2、编写CSS

所有需要布局的元素大小由CSS来确定，所有元素必须是浮动的
eg:

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

3、编写脚本

编写脚本传入初始化布局参数，让容器自动布局。
强烈推荐配置itemSelector和columnWidth两个参数。更多参数配置请查阅官网。

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

OK，到此结束。So easy~

看看效果吧

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 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瀑布流插件使用方法详解

    用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瀑布流插件使用详解

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

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

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

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

  • javascript瀑布流布局实现方法详解

    本文实例讲述了javascript瀑布流布局实现方法.分享给大家供大家参考,具体如下: html结构: <div id="waterfall"> <div class="mod-box"> <div class="mod-img">...</div> </div> <div class="mod-box"> <div class="mod-

  • 基于jquery实现瀑布流布局

    基于jquery实现瀑布流布局

    本文实例为大家介绍了基于jquery实现瀑布流布局的关键代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: 使用jquery-1.8.3.min.js,waterfall.js代码如下: $( window ).load( function(e){ waterfall(); var dataInt = { 'data': [{ 'src': '1.jpg' },{ 'src': '2.jpg' },{ 'src': '3.jpg' },{ 'src': '4.jpg' }]}; $(

  • jQuery实现区域打印功能代码详解

    使用CSS控制打印样式,需要设置样式media="print",并且将页面中不需要打印的元素的样式display属性设置为none.如DEMO中,我将页头页脚及其他不需要打印的元素的样式设置如下: <style type="text/css" media="print"> #header,.top_title,#jqprint,#footer,#cssprint h3{display:none} </style> 用jQu

  • jquery 键盘事件的使用方法详解

    jquery 键盘事件的使用方法详解 jQuery处理键盘事件有三个函数,根据事件发生的顺序分别是: jquery 代码: 1.  keydown(); 2.  keyup();  3.  keypress(); keydown() keydown事件会在键盘按下时触发,可以在绑定的函数中欧能够返回false来防止触发浏览器的默认事件. keyup() keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件. keypress() keypress事件会在敲击按键时触发,我们可以理解为按

  • 使用jQuery,Angular实现登录界面验证码详解

    使用jQuery,Angular实现登录界面验证码详解

    写在前面: 前段事件,做了一个用ajax后台异步交互的登录功能,自己在上面加了一个验证码的功能,这个功能背后的原理挺好理解的,实现起来也十分简单,特此写波分享,,自己写的过程中踩了不少坑,这里还是照例写的详细点,大家可以做个参考,喜欢的朋友可以点个赞,或者关注一波. 最终实现的效果: 当点击登录之前,会先判断验证码是否正确(验证码可以不区分大小写,也可以区分大小写),验证码错误会刷新验证码,验证码验证之前,不会进行跨域登录操作. 整体思路. 1.取四位随机数 2.赋值到验证码的input框里.

  • jQuery正则表达式的使用方法步骤详解

    jQuery正则表达式的使用方法步骤详解

    本文主要和大家分享的就是jQuery学习中正则的使用,正则在jquery里面并没有比JavaScript多哪些知识,基本上是一样的,只是选择器更好了一点,一起来看看吧. 基础正则 1.正则表达式的创建 a) var checkNum = /^[A-Za-z0-9]+$/; b) var re=new RegExp("["+s1+"]","g"); 2.常用规则 a) 用户密码:/^[a-zA-Z][a-zA-Z0-9_]{5,20}$/ b) 邮

  • ASP.NET MVC中使用jQuery时的浏览器缓存问题详解

    介绍 尽管jQuery在浏览器ajax调用的时候对缓存提供了很好的支持,还是有必要了解一下如何高效地使用http协议. 首先要做的事情是在服务器端支持HTTP GET,定义不同的URL输出不同的数据(MVC里对应的就是action).如果要使用同一个地址获取不同的数据,那就不对了,一个HTTP POST也不行因为POST不能被缓存.许多开发人员使用POST主要有2个原因:明确了数据不能被缓存,或者是避免JSON攻击(JSON返回数组的时候可以被入侵). 缓存解释 jQuery全局对象里的ajax

  • jQuery中ajax - post() 方法实例详解

    jQuery中ajax - post() 方法实例详解

    在jquery中的ajax有二个数据发送模式,一种是get,另一种是post(). jQuery Ajax 参考手册 实例 请求 test.php 网页,忽略返回值: $.post("test.php"); TIY 实例 通过 AJAX POST 请求改变 div 元素的文本: $("input").keyup(function(){ txt=$("input").val(); $.post("demo_ajax_gethint.asp

随机推荐