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


Posted in Javascript onJanuary 18, 2017

用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.qiniudn.com/masonry-docs.min.js"></script>

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

2、页面代码

<div id="masonry" class="container-fluid">
 <div class="box"><img src="http://jq22.com/images/1.jpg"></div>
 <div class="box"><img src="http://jq22.com/images/2.jpg"></div>
 <div class="box"><img src="http://jq22.com/images/3.jpg"></div>
 <div class="box"><img src="http://jq22.com/images/4.jpg"></div>
 <div class="box"><img src="http://jq22.com/images/5.jpg"></div>
 ...
</div>

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

3,、样式代码

.container-fluid {
 padding: 20px;
 }
.box {
 margin-bottom: 20px;
 float: left;
 width: 220px;
 }
 .box img {
 max-width: 100%
}

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

4、在页面中启用瀑布流形式的脚本代码

$(function() {
 var $container = $('#masonry');
 $container.imagesLoaded(function() {
  $container.masonry({
    itemSelector: '.box',
    gutter: 20,
    isAnimated: true,
   });
  });
});

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

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

(感谢网友阿富)提供不居中显示!

我的一个笨方法:

$(function() {
 var $objbox = $("#masonry");
 var gutter = 25;
 var centerFunc, $top0;
 $objbox.imagesLoaded(function() {
  $objbox.masonry({
   itemSelector: "#masonry > .box",
   gutter: gutter,
   isAnimated: true
  });
  centerFunc = function() {
   $top0 = $objbox.children("[style*='top: 0']");
   $objbox.css("left", ($objbox.width() - ($top0.width() * $top0.length + gutter * ($top0.length - 1))) / 2).parent().css("overflow", "hidden");
  };
  centerFunc();
 });
 var tur = true;
 $(window).resize(function() {
  if (tur) {
   setTimeout(function() {
    tur = true;
    centerFunc();
   },
   1000);
   tur = false;
  }
 });
});

源码下载:http://xiazai.3water.com/201701/yuanma/jquerymasonry(3water.com).rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery中:password选择器用法实例
Jan 03 Javascript
js+html5实现canvas绘制简单矩形的方法
Jun 05 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
Mar 17 Javascript
webpack写jquery插件的环境配置
Dec 21 jQuery
React Native开发封装Toast与加载Loading组件示例
Sep 08 Javascript
Javascript实现时间倒计时功能
Nov 17 Javascript
Bootstrap4 gulp 配置详解
Jan 06 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
Apr 29 Javascript
layer.open 获取不到表单信息的解决方法
Sep 26 Javascript
在vue中动态添加class类进行显示隐藏实例
Nov 09 Javascript
vue项目配置使用flow类型检查的步骤
Mar 18 Javascript
深入解读VUE中的异步渲染的实现
Jun 19 Javascript
js实现消息滚动效果
Jan 18 #Javascript
利用Vue.js实现checkbox的全选反选效果
Jan 18 #Javascript
微信小程序的动画效果详解
Jan 18 #Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
Jan 18 #Javascript
bootstrap配合Masonry插件实现瀑布式布局
Jan 18 #Javascript
JavaScript字符串对象(string)基本用法示例
Jan 18 #Javascript
Vue.js自定义指令的用法与实例解析
Jan 18 #Javascript
You might like
让PHP显示Facebook的粉丝数量方法
2014/01/08 PHP
CI框架中site_url()和base_url()的区别
2015/01/07 PHP
php的GD库imagettftext函数解决中文乱码问题
2015/01/24 PHP
php编程中echo用逗号和用点号连接的区别
2016/03/26 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
Laravel框架控制器的request与response用法示例
2019/09/30 PHP
HR vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
限制文本字节数js代码
2007/03/06 Javascript
jquery animate 动画效果使用说明
2009/11/04 Javascript
jQuery AJAX 调用WebService实现代码
2010/03/24 Javascript
js 分页全选或反选标识实现代码
2011/08/09 Javascript
新发现一个骗链接的方法(js读取cookies)
2012/01/11 Javascript
常用Extjs工具:Extjs.util.Format使用方法
2012/03/22 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
JS关键字变色实现思路及代码
2013/02/21 Javascript
js算法中的排序、数组去重详细概述
2013/10/14 Javascript
JavaScript实现twitter puddles算法实例
2014/12/06 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
2016/12/29 Javascript
如何将百度地图包装成Vue的组件的方法步骤
2019/02/12 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
2019/08/07 Javascript
微信小程序自定义modal弹窗组件的方法详解
2020/12/20 Javascript
Python实现简单状态框架的方法
2015/03/19 Python
Python实现的根据文件名查找数据文件功能示例
2018/05/02 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
浅谈Python中threading join和setDaemon用法及区别说明
2020/05/02 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
详解用Python调用百度地图正/逆地理编码API
2020/07/02 Python
python db类用法说明
2020/07/07 Python
意大利综合购物网站:Giordano Shop
2016/10/21 全球购物
享受加州生活方式的时尚舒适:XCVI
2018/07/09 全球购物
香港百佳网上超级市场:PARKNSHOP.com
2020/06/10 全球购物
大二学生学习个人自我评价
2014/01/19 职场文书
后勤服务中心总经理工作职责
2014/03/03 职场文书
合作协议书
2014/04/23 职场文书
学生违反校规检讨书
2014/10/28 职场文书
spring cloud 配置中心native配置方式
2021/09/25 Java/Android