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 lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
Oct 17 Javascript
理解javascript中DOM事件
Dec 25 Javascript
JavaScript中的this,call,apply使用及区别详解
Jan 29 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 Javascript
详解如何从零开始搭建Express+Vue开发环境
Jul 17 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 Javascript
微信小程序—setTimeOut定时器的问题及解决
Jul 26 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
Aug 27 Javascript
layui之数据表格--与后台交互获取数据的方法
Sep 29 Javascript
vue点击自增和求和的实例代码
Nov 06 Javascript
封装一下vue中的axios示例代码详解
Feb 16 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
Sep 24 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
PHPMailer安装方法及简单实例
2008/11/25 PHP
防止本地用户用fsockopen DDOS攻击对策
2011/11/02 PHP
关于二级目录拖拽排序的实现(源码示例下载)
2013/04/26 PHP
使用php 获取时间今天明天昨天时间戳的详解
2013/06/20 PHP
ThinkPHP标签制作教程
2014/07/10 PHP
完美的2个php检测字符串是否是utf-8编码函数分享
2014/07/28 PHP
php中session与cookie的比较
2015/01/27 PHP
CodeIgniter钩子用法实例详解
2016/01/20 PHP
PHP使用观察者模式处理异常信息的方法详解
2019/09/24 PHP
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
2010/12/08 Javascript
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
2014/01/14 Javascript
js锁屏解屏通过对$.ajax进行封装实现
2014/07/31 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
webpack@v4升级踩坑(小结)
2018/10/08 Javascript
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
Openlayers学习之地图比例尺控件
2020/09/28 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2020/10/26 Javascript
[34:08]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS EG
2018/03/30 DOTA
[49:56]VG vs Optic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
使用C#配合ArcGIS Engine进行地理信息系统开发
2016/02/19 Python
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
python发送邮件脚本
2018/05/22 Python
pyqt5中QThread在使用时出现重复emit的实例
2019/06/21 Python
Python定时任务工具之APScheduler使用方式
2019/07/24 Python
django框架两个使用模板实例
2019/12/11 Python
Python 线性回归分析以及评价指标详解
2020/04/02 Python
python如何实现读取并显示图片(不需要图形界面)
2020/07/08 Python
结合CSS3的新特性来总结垂直居中的实现方法
2016/05/30 HTML / CSS
美国第二大连锁药店:Rite Aid
2019/04/03 全球购物
精彩的英文自荐信
2014/01/30 职场文书
开业典礼主持词
2014/03/21 职场文书
公司离职证明范本
2014/10/17 职场文书
教师党员学习群众路线心得体会
2014/11/04 职场文书
个人政治思想总结
2015/03/05 职场文书