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 相关文章推荐
Prototype Hash对象 学习
Jul 19 Javascript
将CKfinder整合进CKEditor3.0的新方法
Jan 10 Javascript
JS弹出对话框返回值代码(asp.net后台)
Dec 28 Javascript
JS仿flash上传头像效果实现代码
Jul 18 Javascript
jqTransform美化表单
Oct 10 Javascript
原生js仿jquery animate动画效果
Jul 13 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
Oct 15 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
Oct 24 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
Jul 27 Javascript
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
微信小程序如何像vue一样在动态绑定类名
Apr 17 Javascript
JS原生瀑布流效果实现
Apr 26 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 print EOF实现方法
2009/05/21 PHP
关于crontab的使用详解
2013/06/24 PHP
PHP批量上传图片的具体实现方法介绍.
2014/02/26 PHP
PHP采用curl模仿用户登陆新浪微博发微博的方法
2014/11/07 PHP
Laravel5中Cookie的使用详解
2017/05/03 PHP
php array 转json及java 转换 json数据格式操作示例
2019/11/13 PHP
jquery last-child 列表最后一项的样式
2010/01/22 Javascript
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
Javascript控制input输入时间格式的方法
2015/01/28 Javascript
javascript模拟评分控件实现方法
2015/05/13 Javascript
javascript操作ul中li的方法
2015/05/14 Javascript
javascript实现行拖动的方法
2015/05/27 Javascript
解决js图片加载时出现404的问题
2020/11/30 Javascript
深入浅析JavaScript中with语句的理解
2016/05/12 Javascript
老生常谈onBlur事件与onfocus事件(js)
2016/07/09 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
2017/04/11 Javascript
js 显示日期时间的实例(时间过一秒加1)
2017/10/25 Javascript
详解babel升级到7.X采坑总结
2019/05/12 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
2019/11/08 Javascript
vue模块移动组件的实现示例
2020/05/20 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
2020/07/20 Javascript
python3.6的venv模块使用详解
2018/08/01 Python
对Python3使运行暂停的方法详解
2019/02/18 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
Python面向对象程序设计之私有变量,私有方法原理与用法分析
2020/03/23 Python
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
Draper James官网:知名演员瑞茜·威瑟斯彭所创品牌
2017/10/25 全球购物
如何清空Session
2015/02/23 面试题
《狐假虎威》教学反思
2014/02/07 职场文书
2014年银行柜员工作总结
2014/11/12 职场文书
2014年教务工作总结
2014/12/03 职场文书
2015年中秋节演讲稿
2015/03/20 职场文书
锦旗赠语
2015/06/23 职场文书
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记