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 相关文章推荐
在网页中控制wmplayer播放器
Jul 01 Javascript
Jquery常用的方法汇总
Sep 01 Javascript
jQuery.extend 函数及用法详细
Sep 06 Javascript
JS实现字符串转日期并比较大小实例分析
Dec 09 Javascript
解决WordPress使用CDN后博文无法评论的错误
Dec 15 Javascript
Bootstrap菜单按钮及导航实例解析
Sep 09 Javascript
原生js实现ajax方法(超简单)
Sep 20 Javascript
jquery 仿锚点跳转到页面指定位置的实例
Feb 14 Javascript
Javascript实现秒表倒计时功能
Nov 17 Javascript
antd Upload 文件上传的示例代码
Dec 14 Javascript
layui表单验证select下拉框实现验证的方法
Sep 05 Javascript
解决vant-UI库修改样式无效的问题
Nov 03 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
phpMyAdmin 安装教程全攻略
2007/03/19 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
浅谈php调用python文件
2019/03/29 PHP
onpropertypchange
2006/07/01 Javascript
页面中js执行顺序
2009/11/09 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
jQuery中data()方法用法实例
2014/12/27 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
2015/12/03 Javascript
AngularJS中使用HTML5手机摄像头拍照
2016/02/22 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
2016/05/20 Javascript
AngularJS的ng Http Request与response格式转换方法
2016/11/07 Javascript
使用jQuery操作DOM的方法小结
2017/02/27 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
Ionic3 UI组件之Gallery Modal详解
2017/06/07 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
jQuery选择器_动力节点Java学院整理
2017/07/05 jQuery
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
Vue2仿淘宝实现省市区三级联动
2020/04/15 Javascript
浅谈VUE单页应用首屏加载速度优化方案
2018/08/28 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
Python Web框架Flask信号机制(signals)介绍
2015/01/01 Python
python创建关联数组(字典)的方法
2015/05/04 Python
Python排序搜索基本算法之堆排序实例详解
2017/12/08 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
Python continue语句实例用法
2020/02/06 Python
美国最大婚纱连锁店运营商:David’s Bridal
2019/03/12 全球购物
简历自荐信
2013/12/02 职场文书
运动会通讯稿50字
2014/01/30 职场文书
遗嘱继承公证书
2014/04/09 职场文书
小学综合实践活动总结
2014/07/07 职场文书
党的群众路线教育实践活动对照检查材料思想汇报(党员篇)
2014/09/25 职场文书
综合素质评价个性发展自我评价
2015/03/06 职场文书
关于实现中国梦的心得体会
2016/01/05 职场文书