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 相关文章推荐
javascript &amp;&amp;和||运算法的另类使用技巧
Nov 28 Javascript
node.js中的fs.fchown方法使用说明
Dec 16 Javascript
详解node.js搭建代理服务器请求数据
Apr 08 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
Jun 13 Javascript
javaScript实现滚动条事件详解
Mar 24 Javascript
详解React开发必不可少的eslint配置
Feb 05 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
Feb 08 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
Mar 09 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
Jun 19 Javascript
JS实现的类似微信聊天效果示例
Jan 29 Javascript
javascript实现图片轮播代码
Jul 09 Javascript
JS运算符优先级与表达式示例详解
Sep 04 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函数utf8转gb2312编码
2006/12/21 PHP
PHP调用MySQL的存储过程的实现代码
2008/08/12 PHP
Apache服务器无法使用的解决方法
2013/05/08 PHP
php正则替换处理HTML页面的方法
2015/06/17 PHP
PHP快速推送微信模板消息
2017/04/14 PHP
PHP大文件分块上传功能实例详解
2019/07/22 PHP
javascript parseInt 函数分析(转)
2009/03/21 Javascript
jquery png 透明解决方案(推荐)
2010/08/21 Javascript
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
三种动态加载js的jquery实例代码另附去除js方法
2014/04/30 Javascript
Jquery解析Json格式数据过程代码
2014/10/17 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
2016/07/14 Javascript
Bootstrap table的使用方法
2016/11/02 Javascript
Vue.JS入门教程之自定义指令
2016/12/08 Javascript
AngularJS过滤器filter用法总结
2016/12/13 Javascript
JS重载实现方法分析
2016/12/16 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
jQuery事件与动画基础详解
2017/02/23 Javascript
基于es6三点运算符的使用方法(实例讲解)
2017/10/12 Javascript
vue+swiper实现侧滑菜单效果
2017/12/28 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
2018/06/28 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
2019/03/06 Javascript
使用js在layui中实现上传图片压缩
2019/06/18 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
[06:21]2014DOTA2国际邀请赛 庆祝VG首阶段领跑;B叔为挣牛排半夜整理情报
2014/07/13 DOTA
[01:10]DOTA2次级职业联赛 - EP战队宣传片
2014/12/01 DOTA
Python读写txt文本文件的操作方法全解析
2016/06/26 Python
python numpy函数中的linspace创建等差数列详解
2017/10/13 Python
Scrapy爬虫文件批量运行的实现
2020/09/30 Python
pandas apply使用多列计算生成新的列实现示例
2021/02/24 Python
abstract class和interface有什么区别?
2012/01/03 面试题
linux下进程间通信的方式
2013/01/23 面试题
爱护草坪标语
2014/06/24 职场文书
教师批评与自我批评心得体会
2014/10/16 职场文书
民政工作个人总结
2015/02/28 职场文书
Python中Matplotlib的点、线形状、颜色以及绘制散点图
2022/04/07 Python