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下function声明一些小结
Dec 28 Javascript
基于jquery的超简单上下翻
Apr 20 Javascript
Js base64 加密解密介绍
Oct 11 Javascript
javascript中AJAX用法实例分析
Jan 30 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
Jul 21 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
Oct 31 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
Nov 15 Javascript
JS快速实现简单计算器
Apr 08 Javascript
微信小程序实现聊天室功能
Jun 14 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水印
2007/03/16 PHP
通过PHP的内置函数,通过DES算法对数据加密和解密
2012/06/21 PHP
ThinkPHP单字母函数(快捷方法)使用总结
2014/07/23 PHP
全面解析PHP面向对象的三大特征
2017/06/10 PHP
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
2014/09/01 Javascript
JS实现列表的响应式排版(推荐)
2016/09/01 Javascript
简单谈谈Vue 模板各类数据绑定
2016/09/25 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
利用Vue2.x开发实现JSON树的方法
2018/01/04 Javascript
详解Angular路由之路由守卫
2018/05/10 Javascript
如何用Node写页面爬虫的工具集
2018/10/26 Javascript
layDate插件设置开始和结束时间
2018/11/15 Javascript
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
python基础教程之匿名函数lambda
2017/01/17 Python
Bottle框架中的装饰器类和描述符应用详解
2017/10/28 Python
Python入门之三角函数tan()函数实例详解
2017/11/08 Python
Python3计算三角形的面积代码
2017/12/18 Python
Python中实现switch功能实例解析
2018/01/11 Python
python数据分析数据标准化及离散化详解
2018/02/26 Python
对python numpy数组中冒号的使用方法详解
2018/04/17 Python
python顺序执行多个py文件的方法
2019/06/29 Python
Python OpenCV调用摄像头检测人脸并截图
2020/08/20 Python
Window10下python3.7 安装与卸载教程图解
2019/09/30 Python
Python imread、newaxis用法详解
2019/11/04 Python
Python中的全局变量如何理解
2020/06/04 Python
使用K.function()调试keras操作
2020/06/17 Python
Python中random模块常用方法的使用教程
2020/10/04 Python
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
美体小铺英国官网:The Body Shop英国
2017/01/24 全球购物
会计专业毕业自荐书范文
2014/02/08 职场文书
优秀学生获奖感言
2014/02/15 职场文书
腾讯广告词
2014/03/19 职场文书
销售经理竞聘书
2014/03/31 职场文书
Nginx域名转发https访问的实现
2021/03/31 Servers
Python基础之常用库常用方法整理
2021/04/30 Python